CSS动画

在假期呆着很无聊，于是翻起了当初在逆战班的笔记，看到了关于动画的内容，在现在的主页中，动画也是比较常用的，通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript，那么也是写下一些自己的看法，所幸写下来分享给大家。
那么什么是动画，动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。
创建动画需要使用animation属性及子属性。
1、animation-name (必要的)
指定由@keyframes描述的关键帧名称。用来检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用。
定义关键帧：@keyframes xxx{} animation-name : xxx ;
关于@keyframes
语法一：@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
语法二：@keyframes mymove{
0%{初始状态属性}
100%{结束状态属性}
}
0% = from ; 100% = to
2、animation-duration (必要的)
设置动画一个周期的时长。以s或ms为单位。
animation-duration:3s; 动画完成使用的时间为3s
3、animation-delay
检索或设置对象动画延迟的时间（s,ms）
说明：animation-delay:0.5s; 动画开始前延迟的时间为0.5s
举个例子，如果两个同样向终点跑步的人，当设置这个属性，会在这个时间之后才会跑步。
4、animation-timing-function
检索或设置对象动画的过渡类型，动画会根据这个属性来决定自己运动的速度。
属性值：
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) 默认值；
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:马上跳到动画每一结束桢的状态 (实现逐帧动画效果)
5、animation-iteration-count
检索或设置对象动画的循环次数
属性值：
animation-iteration-count: infinite | number;
infinite：无限循环
number: 循环的次数 值位数字
设置该属性，动画会根据数值或属性值来决定循环的次数
6、animation-direction
检索或设置对象动画在循环中是否反向运动
属性值：
normal：正常方向 0% —— 100%
reverse：反方向运行 100% —— 0%
alternate：动画先正常运行再反方向运行，并持续交替运行 0% —— 100% —— 0%；
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
100% —— 0% —— 100%
7、animation-fill-mode
说明：规定动画播放之前或之后，其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置 （重点记忆）
both : backwards和forwards同时生效
举个例子，我们为1，2，3，4分别设置同样的动画，然后依次添加属性值，动画内容为向右位移300px并在开始将背景色变成蓝色，同时设置2s的延迟，结束时颜色恢复，对比如下

8、animation-play-state
检索或设置对象动画的状态
属性值：
animation-play-state:running | paused;
running:运动 (默认值)
paused: 暂停
注：通过鼠标某些事件时添加的；animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行
如X:hover{animation-play-state:paused; }
若在动画里设置会使动画不播放。