![](https://csdnimg.cn/release/download_crawler_static/87936543/bg1.jpg)
1、 animation: steps(3,end); 将动画未定义的每个间隔部分分割为 3 段,每次直接展示每段
最后一帧的内容。
2、 animation 的取值
1.nimation-direction: 规定动画的执行方向
reverse:反向播放动画
alternate: 奇数次正常播放,偶数次反向播放
alternate-reverse:奇数次反向,偶数次正向
2. animation-name:; 规定动画的名称
3. animation-duration: 2s; 动画执行时间
4. animation-timing-function: linear; 运动曲线
Linear 匀速
Ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1
的数值
5. animation-delay: 3s; 动画开始时间
6. animation-iteration-count: infinite; 数字表示执行次数,infinite 表示无限循环
7. animation-fill-mode: both; 规定动画不播放时(延迟开始时和动画结束后这两个时间
段保持的样式,
backwards 开始前和第一帧一样
forwards 结束后和最后一帧一样
both 前后都有
8. animation-play-state:paused ; 控制动画运行或暂停,可以与:hover 联用