CSS的动画属性有哪些？

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript

首先要想形成动画效果必须要制定关键帧 @keyframes。
关键帧的定义：
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
或
@keyframes mymove{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}
制定了关键帧，必须要用animation属性调用

那么动画有哪些属性呢？跟着我来看看吧！

1、animation-name

1、设置对象所应用的动画名称，就是关键帧的名称
2、必须与规则@keyframes配合使用，例：@keyframes mymove{} animation-name:mymove;

2、animation-duration

设置对象动画的持续时间
说明：animation-duration:3s; 动画完成使用的时间为3s

3、animation-timing-function

设置对象动画的过渡类型
属性值：

1. linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
2. ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
3. ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
4. ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
5. ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6. step-start:马上跳到动画每一结束桢的状态

4、animation-delay

设置对象动画延迟的时间
说明：animation-delay:1s; 动画开始前延迟的时间为1s

5、animation-direction

设置对象动画在循环中是否反向运动
属性值：

1. normal：正常方向
2. reverse：反方向运行
3. alternate：动画先正常运行再反方向运行，并持续交替运行
4. alternate-reverse：动画先反运行再正方向运行，并持续交替运行

6、animation-play-state

设置对象动画的状态
属性值：

1. animation-play-state:running 运动
2. animation-play-state：paused 暂停

7、animation-iteration-count

设置对象动画的循环次数
属性值：

1. animation-iteration-count：infinite 无限循环
2. animation-iteration-count number 加上循环的次数，动画就会循环几次

为了便于大家理解，我做了一个小demo

可以动手去试一试哦！