animation 动画
css动画与过渡动画的相同点:可以控制元素从始态到终态属性值在一段时间内发生变化,将变化的过程延长,使其看起来更加平滑。
不同点:动画对变化的方式有更多的选择和控制。能够深度控制整个动画变化的过程。
定义关键帧
帧,就是动画中最小单位的单幅影像画面,相当于电影胶片的每一个镜头。
关键帧,相当于二维动画中的原画。指角色或物体运动变化中关键动作所处的那一帧,关键帧与关键帧之间的每幅图像就可以由软件来创建。
设置关键帧
基础语法:通过@keyframs来进行设置
@keyframs 动画名称 {
/* 关键帧选择符 */
/* 0% */
from{
}
10%{
}
20%{
}
80%{
}
/* 100% */
to{
}
}
注意事项:
- 关键帧在命名时,尽量不要带有特殊字符,可以下划线和连字符,但是不能以数字开头。另外,不要使用none、paused、running、infinite、backwards和forwards,因为这些都是动画的其他控制属性的属性值。
- 关键帧选择符可以是一组百分数,也可以是关键字
from
`to`,form代表0%,to代表100%。 - 选择符不一定要按照动画顺序来排列。只是按照顺序来写,更容易维护和辨别。
animation 将动画应用到元素上
想要动画动起来,至少要指明动画的名字,以及动画持续的时间。
animation-name 指定动画名称
animation-name属性的属性值就是在@keyframes声明的名字,可以添加多个,用逗号隔开彼此即可。
{
animation-name: kern,kern-rotate;
}
默认值为none。
animation-duration 定义动画的时长
{
animation-duration:1s;
}
表示动画迭代一次用时多久,单位为s(秒)或ms(毫秒)
animation-iteration-count 动画的迭代次数
默认情况下,动画只播放一次,取值为具体整数字,也可以指定infinite
属性值来让动画无限循环下去。
{
animation-iteration-count: 2 | infinite
}
设置动画的播放方向 animation-direction
按照正常思维,动画正常播放流程是从0%到100%,但也可以通过 animation-direction
属性控制动画从100%播放到0%,也可以隔一次循环变一次方向
animation-direction:normal | reverse | alternate | alternate-reverse
- normal:默认值,动画每次迭代方向为0-100%
- reverse:逆序播放各次迭代,即100-0%。同时逆转了动画的
animation-timing-function
; - alternate:交替迭代,指第一次迭代从0-100%,第二次从100-0%,然后开始一直交替循环下去
- alternate-reverse:逆序交替迭代:与alternate反过来,第一次迭代按reverse播放,第二次按normal播放。
延迟动画播放 animation-delay
定义浏览器把动画附加到元素上之后等待多久开始第一次迭代
{
animation-delay: 1s;
}
animation-delay属性单位为秒或毫秒,默认情况下,值为0,也就是立即开始播放
animation-timing-function 动画频率
与transition-timing-function非常相似,同样是指明动画在一次循环迭代中如果过渡演进。
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | steps()
前面五个属性与transition的含义一致,关键在于后面的steps:逐帧动画。
设置动画的播放状态 animation-play-state
用于控制动画播放还是停止
animation-play-state:running | paused
- runing:播放
- paused:暂停
当动画在运动的过程中被暂停,动画的状态会停留在当前已经运动到的状态,在将状态变为播放时,动画会按照暂停前的状态(位置)继续运动下去,而不会重置整个过程。
动画的填充模式 animation-fill-mode
animation-fill-mode定义动画播放结束后是否应用原来的样式属性,或当动画有延迟时是否应用动画中的样式
{
animation-fill-mode:none | forwards | backwards | both
}
- forwards:动画结束后,结尾时的动画样式属性将继续应用在元素上
- backwards:当动画元素存在aniamtion-delay时,0%或100%关键中定义的属性会立马作用到元素上,而不会等待延迟结束才作用上去。(会受到动画播放方向影响,如果时0-100%方向播放则会应用0%关键帧的样式,如果是100-0%则会应用100%关键帧的样式)
- both:代表以上两种效果都存在。
复合语法
{
animation: <animation-name>名称 | <animation-duration>时长 | <animation-timing-function> 频率 | <animation-delay>延迟 | <animation-iteration-count> 次数 | <animation-direction>方向 | <animation-fill-mode> 填充模式 | <animation-play-state>播放状态
}
逐帧动画 steps
steps:步进时序函数
steps函数会把动画分成一系列等长的步幅,接受两个参数:步数,变化点
- 第一个参数:指定函数的间隔数,必须是一个正整数。动画市场将平均分成与步数相对应的段数。例如动画时长1s,步数为10,那么动画将会分成10步完成,一步的时长为100ms。元素会在页面中重新绘制10次,间隔为100ms一次。
- 第二个参数:start | end(默认值)
- end:表示在一个周期的结尾赋值,当值为end时会由默认状态到0%关键帧位置第一次变更值作为第一步,会忽略最后一步。
- start:表示在一个周期的开始进行赋值,也就是说不存在0%。