animation属性的存在,让我们可以很方便的创建动画,但由于属性较多,所以使用时有点乱,所以在此综合整理一下,以便后续使用。
一、animation的属性(以下书写的顺序便是简写时的书写顺序,注意第八个属性,这个属性是不可以简写的)
1、animation-name:动画的名称
2、animation-duration:动画的持续时间
3、animation-timing-function:动画的速度曲线
4、animation-delay:动画的延迟执行时间
5、animation-iteration-count:动画执行次数
6、animation-direction:动画执行的方向
7、animation-fill-mode:规定动画时间之外的状态
8、animation-play-state:设置动画执行或暂停(不可简写)
二、animation属性的具体解析
1、animation-name:动画的名称
即@keyframes 动画的名称
2、animation-duration:动画的持续时间
动画完成一个周期所花费的秒或毫秒。默认是 0。
3、animation-timing-function:动画的速度曲线
默认值为ease
linear:动画从头到尾速度相同
ease:动画以低速开始,然后加快,在结束前变慢
ease-in:动画以低速开始
ease-out:动画以低速结束
ease-in-out:动画以低速开始和结束
cubic-bezier(x1,y1,x2,y2):贝塞尔函数,用于自定义速度曲线
关于贝塞尔曲线,推荐去看这篇文章,图解的很不错
https://www.jianshu.com/p/d999f090d333
4、animation-delay:动画的延迟执行时间
设置动画何时开始,默认值为0,也就是立即执行
5、animation-iteration-count:动画执行次数
动画被播放的次数,默认值为1
6、animation-direction:动画执行的方向
normal:动画正常播放,到达终点后,若设置为执行多次,则立即跳至起点,开始下一次动画
alternate:动画轮流反向播放,即到达终点后,若设置为执行多次,则从终点反向运动至起点
reverse:反向运行动画,从100%到0%
alternate-reverse:动画轮流反向播放,只不过第一次从100%开始
7、animation-fill-mode:规定动画时间之外的状态
将动画过程分为初始状态(即非keyframes内设置的样式)、等待时期(delay设置的时间内)、执行、完成时期
none:不改变默认行为
forwards:表示等待期保持初始样式,完成期间保持最后一帧样式。
backwards :表示等待期为第一帧样式,完成期跳转为初始样式
both:表示等待期样式为第一帧样式,完成期保持最后一帧样式
8、animation-play-state:设置动画执行或暂停(不可简写)
paused:动画暂停
running:动画正在播放