css3动画-animation
animation驱使一组css style变化到另外一组css style，它可以定义keyframes的集合，指定style的开始和结束状态，它是transition的增强。
配置animation
animation-delay：从加载到开始执行的延迟
animation-direction：normal|reverse|alternate|alternate-reverse 参考
normal：往前执行，完成后又回到原点
reverse：和定义的方向相反，完成后回到原点开始执行
alertnate：先往前到最后，又从最后往前执行，看上去比较顺滑
animation-duration：持续时间
animation-iteration-count：重复次数（infinite 无限）
animation-name：@keyframes定义的名称，描述每帧内元素的表现
animation-play-state：终止或者重新开始animation序列
animation-timing-function：定义运动曲线的function
animation-fill-mode：参考
用keyframes定义animation顺序
定义一系列的keyframe来描述元素在被给的时间内应该怎么表现。两个最重要的状态就是0%（最初状态）和100%（终止状态）别名是from和to，这两个状态是可选的，如果没有指定，就用当前元素计算出来的值。
例子：
h1 { -webkit-animation-duration: 3s; -webkit-animation-name: slidein; } @-webkit-keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } }
<h1>Watch me move</h1>
<p>This example shows how to use CSS animations to make <code>H1</code> elements move across the page.</p>
@keyframes定义了slidein，有两个状态0%和100%。最初状态 margin-left: 100%;width: 300%，3s后margin-left:0%;width:100%;
animation事件
animationstart animation开始
animationend 结束
animationiteration 新的循环开始
事件有两个属性 animationName 和 elapsedTime（运行时间）
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
