标签：
元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
div{ width:100px; height:100px; background:red; position:relative; animation-name:mymove; animation-duration:5s; }
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
div{ width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;
}
@keyframes FromLeftToRight{ 0%{left: 0; } 100%{ left: 800px; } }
div{ -webkit-animation-duration:1s; animation-duration:1s/*所需的动画时间1秒*/
}
div{ -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in;/*动画的过渡速度是由慢到快*/ }
div{ animation-delay:2s;/*延迟2秒*/ }
div { animation-iteration-count:3;/*动画执行的次数是3次*/ }
属性值：
normal：正常方向，默认值。
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
div{ animation-direction : normal; /*正常方向，默认值*/ animation-direction : reverse; /*反方向运行*/ animation-direction : alternate; /*动画先正常运行再反方向运行，并持续交替运行*/ animation-direction :alternate-reverse; /*动画先反向运行再正常运行，并持续交替运行*/ }
属性值：
running：运动
paused：暂停
div:hover{ animation-play-state:paused; /*暂停*/ }
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
div { animation-fill-mode :forwards; /*设置对象状态为动画结束时的状态*/ }
语法：
animation：[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> || <single-animation-play-state> [ ,*]
可以将以上属性缩写。例如以下代码：
div{ animation: FromLeftToRight 2s ease-out forwards; }
标签：
原文地址：http://www.cnblogs.com/dadayang/p/5774861.html
