脚本宝典收集整理的这篇文章主要介绍了动画，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
语法：
transition: property duration timing-function delay; //要设置过渡的css，这个要过渡多长时间完成，过渡的速度（均匀/变速..），动画延迟
property 最方便就是all，否则就写css要变的属性，多属性的话就用逗号 , 隔开 timing-function (cubic-bezier是个曲线函数)
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
| 值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 （即@keyframes的名字） |
| animation-duration | 需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 （和上面那个一样） |
| animation-delay | 启动前的延迟间隔。 |
| animation-iteration-count | 播放次数。 （n or infinite）即n次或无限次 |
| animation-direction | 是否倒着来一遍？。 （） |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 （目前感觉没什么用） |
| animation-play-state | 指定动画是否正在运行或已暂停。 （目前感觉没什么用） |
**是否倒放？不设置倒放的话，如果设置了重复播放，那重复的时候是很突兀的。要往返的话，常用：alternate，alternate-reverse **
| 值 | 描述 |
|---|---|
| normal | 默认值。动画按正常播放。 |
| reverse | 动画反向播放。 |
| alternate | 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 |
| alternate-reverse | 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 |
@keyframes
@keyframes mymove //这里定义一个动画名字，和animation的name绑定从而实现动画，相当于animation控制时间，@keyframes控制动画
{//动画进行到各个阶段时的css样式
0% { 当前元素的css }
25% { ... }
50% { ... }
75% { ... }
100% { ... }
}
也可以直接设置首尾
@keyframes myName {
from{ ... }
to{ ... }
}
以上是脚本宝典为你收集整理的动画全部内容，希望文章能够帮你解决动画所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。