关键帧动画animation
通过定义一段动画中的关键点、关键状态来创建动画。Keyframes相比transition对动画过程和细节有更强的控制
分为两步:
一、定义关键帧动画
@keyframes 动画名称{
时间点 {元素状态}
}
时间点可以用from (表示起始点) 和 to(表示终点)表示
也可以用百分比表示 0%~100%。
二、绑定关键帧动画
在需要添加动画的元素的css中添加属性 animation
animation也是一个复合属性
animation-name:定义的动画名称
animation-duration:time: 动画播放的时间
animation-timing-function: 规定动画的速度曲线。
同transition中transition-timing-function默认参数一样,也可以使用贝塞尔曲线
还可以使用步进函数steps()
第一个参数必须为正整数,第二个参数取值可以是start或end,默认是end
step-start:等同于 steps(1, start)
step-end:等同于 steps(1, end)
steps(n,start) 设置n个时间点,第一时间点变化状态
steps(n,end) 设置n个时间点,第一时间点初始状态
animstion-delay:time: 规定在动画开始之前的延迟
an