{
···
animation: 动画名称 时长 [过渡函数] [延迟] [播放次数] [播放方向] [样式应用模式];
}
@keyframes 动画名 {
0% {},
100% {}
/**
from: {},
to: {}
*/
}
@keyframes 应以一段动画,可在不同百分比时间处设置关键帧(此时的样式值)
from 和 to 分别等价于 0% 和 100%
animation-timing-function 关键帧过渡函数
- linear 线性
- ease(舒缓 默认 整体上还是先快后慢) * * *
- ease-in(缓入)
- ease-out(缓出)
- ease-in-out
- cubic-bezier(n,n,n,n)(贝塞尔曲线)
- steps(number_of_steps, direction)(阶跃缓动函数)
jump-start / start | jump-end / end | jump-none | jump-both
animation-fill-mode 样式应用模式
在动画执行之前和之后 样式规则
none 会保持原来的样式
forwards 保留由执行期间遇到的最后一个关键帧的样式
backwards 在动画延时开始时,应用第一个关键帧的样式
both 遵循forwards和backwards
animation-delay 延迟
延时播放动画
s 或是 ms
animation-iteration-count 播放次数
规定动画播放次数
数字 或是 infinite(无限)
animation–play-state 播放状态
running 播放 默认
paused 暂停
可用于暂停动画 object.style.animationPlayState="paused"
animation-direction 播放方向
normal 正常播放
reverse 反向播放
alternate 先正向播放,每次播完后调转方向
alternate-reverse 先反向播放,每次播完后调转方向