通过 CSS3，我们能够创建动画
如果要在 CSS3 中创建动画，需要使用 @keyframes 规则
animation属性是复合属性 检索或设置对象所应用的动画特效
@keyframes 创建动画
语法：
@keyframes 动画名{
具体关键样式变化
}
@-webkit-keyframes 动画名{
具体关键样式变化
}
//关键字
@keyframes 动画名{
from{}
to{}
to{}
}
//百分比
@keyframes 动画名{
0%,100%{}
50%{}
/* 100%{}*/
}
animation-name
- 作用：指定动画名称
- 取值
- 默认 none 规定无动画效果
- @keyframes定义动画名称
animation-duration 属性
- 作用：定义动画持续的时间
- 取值
- 单位：以秒或毫秒计
- 默认值为0，需要设置该属性，否则不会播放动画
animation-timing-function
- 作用：定义动画的时间函数
animation-iteration-count
- 作用：定义动画播放次数
- 取值
- 1【默认值】表示1次
- 数值 定义动画播放次数
- infinite 规定动画应该无限次播放。
animation-direction
- 作用：定义动画运动的方向
- 取值
- normal：正常方向
- reverse：反方向运行
- alternate：正向反向交替—》动画先正常运行再反方向运行，并持续交替运行
- alternate-reverse：反向正向交替——》 动画先反运行再正方向运行，并持续交替运行
animation-play-state
作用：动画的执行状态
取值：
- running:运动【默认】
- paused: 暂停
animation-fill-mode
作用：设置动画在运动时间之外的状态
- none 默认值
- 进场之前和动画结束之后都停留在元素的初始状态
- forwards 动画结束之后停留在结束帧状态
- backwards 动画进场之前停留在初始帧状态
- both 以上两者
animation简写
- 语法：
```文章来源地址https://www.toymoban.com/news/detail-430338.html
animation:
动画名字 动画持续时间 动画时间函数 动画延迟时间 动画执行次数 动画的方向 动画的播放状态 填充模式
默认值：none 0 ease 0 1 normal running none;文章来源：https://www.toymoban.com/news/detail-430338.html
```
到了这里，关于animation动画的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
