<' animation-name '>
:对象的动画名称
<' animation-duration '>
:对象动画的持续时间
<' animation-timing-function '>
:对象动画的过渡类型
<' animation-delay '>
:对象动画延迟的时间
<' animation-iteration-count '>
:对象动画的循环次数
<' animation-direction '>
:对象动画在循环中是否反向运动
<' animation-fill-mode '>
:对象动画时间之外的状态
<' animation-play-state '>
:对象动画的状态。
[1] animation-name
检索或设置对象所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义
[2] animation-timing-function
linear
:线性过渡。
ease
:平滑过渡。
ease-in
:由慢到快。
ease-out
:由快到慢。
ease-in-out
:由慢到快再到慢。
step-start
:等同于 steps(1, start) (数字表示每一份显示画面具体再分几份)
step-end
:等同于 steps(1, end)
[3] animation-iteration-count
infinite
: 无限循环
<number>
: 指定对象动画的具体循环次数
[4] animation-direction
normal
:正常方向
reverse
:反方向运行
alternate
:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse
:动画先反运行再正方向运行,并持续交替运行
[5] animation-fill-mode
即动画完成时,是显示动画开始的状态还是结束时的状态。
none
:默认值。不设置对象动画之外的状态
forwards
:设置对象状态为动画结束时的状态
backwards
:设置对象状态为动画开始时的状态
both
:设置对象状态为动画结束或开始的状态
[6] animation-play-state(hover适用)
running
:运动
paused
:暂停
transform和animation的区别
(1)transform仅描述元素的静态样式,常常配合transition和animation使用
(2)transition通常和hover等事件配合使用,animation是自发的,立即播放
(3)animation可设置循环次数
(4)animation可设置每一帧的样式和时间,transition只能设置头尾
(5)transition可与js配合使用,js设定要变化的样式,transition负责动画效果