动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在@keyframes中规定某项css样式，就能创建由当前样式逐渐改变为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。
先定义动画
动画简写格式：
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束方向;
|
属性 |
描述 |
|
@keyframes |
规定动画。 |
|
animation |
所有动画属性的简写属性，除了animation-play-state属性。 |
|
animation-name |
规定@keyframes动画的名称。（必须的） |
|
animation-duration |
规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的） |
|
animation-timing-function |
规定动画的速度曲线，默认是“ease”。 |
|
animation-delay |
规定动画何时开始，默认是0。 |
|
animation-iteration-count |
规定动画被播放的次数，默认是1，还有infinite |
|
animation-direction |
规定动画是否在下一周期逆向播放，默认是“normal“,alternate逆播放 |
|
animation-play-state |
规定动画是否正在运行或暂停。默认是"running",还有"paused"。 |
|
animation-fill-mode |
规定动画结束后状态，保持forwards回到起始backwards |
暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
想要动画走回来 ，而不是直接跳回来：animation-direction ： alternate
animation-timing-function：规定动画的速度曲线，默认是“ease”
|
值 |
描述 |
|
linear |
动画从头到尾的速度是相同的。匀速 |
|
ease |
默认。动画以低速开始，然后加快，在结束前变慢。 |
|
ease-in |
动画以低速开始。 |
|
ease-out |
动画以低速结束。 |
|
ease-in-out |
动画以低速开始和结束。 |
|
steps() |
指定了时间函数中的间隔数量（步长） |
关于几个值，除了名字，动画时间，延时有严格顺序要求，其它随意
@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画
小熊案例：
原文：https://www.cnblogs.com/xc-dh/p/13467316.html