css3动画
@keyframes
规定动画，必须定义动画的名称，动画时长的百分比，一个或多个css样式属性
以百分比来规定改变发生的时间，或者通过关键词from和to，等价于0%和100%
语法：@keyframes animationname {keyframes-selector {css-styles;}}
animation
是一个简写属性，用于设置六个动画属性：
animation-name
规定@keyframes动画的名称
animation-duration
规定动画完成一个周期所花费的秒或毫秒。默认是0
animation-timing-function
规定动画的速度曲线，速度曲线用于使变化更为平滑
linear 动画从头到尾的速度是相同的
ease 默认。动画以低速开始，然后加快，在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
cubic-bezier(n,n,n,n) 在cubic-bezier函数中自己的值。可能的值是从0到1的数值
animation-delay
规定动画何时开始。默认是0
animation-iteration-count
规定动画被播放的次数。默认是1
infinite 规定动画应该无限次播放
animation-direction
规定动画是否在下一周期逆向地播放
normal 默认值。动画应该正常播放
alternate 动画应该轮流反向播放
animation-play-state
规定动画是否正在运行或暂停。默认是running
paused 规定动画已暂停
running 规定动画正在播放
animation-fill-mode
规定动画在播放之前或之后，其动画效果是否可见
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值(在最后一个关键帧中定义)
backwards 在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值(在第一个关键帧中定义)
both 向前和向后填充模式都被应用
div> div>style> div{ width: 100px; height: 100px; background: red; animation: demo 5s ease infinite; position: relative; } @keyframes demo{ 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px; border-radius: 50%;} 50% {background:blue; left:200px; top:200px; border-radius: 0%;} 75% {background:green; left:0px; top:200px; border-radius: 50%;} 100% {background:red; left:0px; top:0px;} }style>
div> p>目前主流浏览器chrome、safari、firefox、opera已经支持css3大部分功能了，ie10以后也开始全面支持css3了p>div>style> div{ margin: 0 auto; width: 500px; height: 35px; overflow: hidden; position: relative; } p{ width: 100000px; position: absolute; left: 0; animation: divv 10s linear infinite; } @keyframes divv{ from{ left: 500px; } to{ left: -800px; } }style>