CSS 用于控制网页的样式和布局CSS3 是最新的 CSS 标准。 CSS Animation动画效果将会影响元素相对应的css值，在整个动画过程中，元素的变化属性值完全是由animation来控制，动画后面的会覆盖前面的属性值.
例：
.demo1{
width:50px;
height:50px;
margin-left:100px;
background:blue;
-webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration:10s;/*动画持续时间*/
-webkit-animation-timing-function:ease-in-out;/*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay:2s;/*动画延迟时间*/
-webkit-animation-iteration-count:10;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction:alternate;/*定义动画方式*/}
css3animation动画属性：
@keyframes规定动画。
例子：@keyframes myfirst
{
from {background: red;}
to {background: yellow;}}
@-moz-keyframes myfirst/* Firefox */
{
from {background: red;}
to {background: yellow;}}
@-webkit-keyframes myfirst/* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}}
@-o-keyframes myfirst/* Opera */
{
from {background: red;}
to {background: yellow;}
}
anmation:所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name:规定需要绑定到选择器的 keyframe 名称.
animation-duration:规定完成动画所花费的时间，以秒或毫秒计.
animation-delay:规定在动画开始之前的延迟.
animation-iteration-count:规定动画应该播放的次数.
animation-direction:规定是否应该轮流反向播放动画.
animation-play-state:属性规定动画正在运行还是暂停.
animation-fill-mode:属性规定动画在播放之前或之后，其动画效果是否可见.
animation-timing-function:规定动画的速度曲线。
