CSS3 Animation-animation

Animation drives a set of CSS style changes to another set of CSS style, which can define a collection of keyframes, specifying the start and end states of a style, which is an enhancement of transition.

Configure animation

animation-delay：从加载到开始执行的延迟

animation-direction：normal|reverse|alternate|alternate-reverse   参考

Normal: Go ahead, finish and return to the original point

Reverse: Contrary to the defined direction, when finished, go back to the origin and start execution.

Alertnate: First to last, then from the last, it looks smoother.

animation-duration：持续时间


animation-iteration-count：重复次数（infinite 无限）

animation-name：@keyframes定义的名称，描述每帧内元素的表现

animation-play-state：终止或者重新开始animation序列

animation-timing-function：定义运动曲线的function

animation-fill-mode：参考

Defining animation order with KeyFrames

Define a series of keyframe to describe how the element should behave within the given time. The two most important states are 0% (the initial state) and 100% (terminating state) aliases are from and to, and the two states are optional, and if not specified, the values are computed using the current element.

Example:

H1 {  -webkit-animation-duration:3s;  -webkit-animation-Name:slidein;} @-webkit-keyframes Slidein {  from  {    margin];      %;   }  To {    margin0    ; %;  }}

<p>this example shows how to use CSS animations to make <code>H1</code> elements move across the PAGE.&L T;/p>

The @keyframes defines the Slidein, with two states 0% and 100%. Initial state margin-left:100%;width:300%,3s after margin-left:0%;width:100%;

Animation events

animationstart animation开始

animationend 结束

animationiteration 新的循环开始

The event has two attributes animationName and elapsedTime（运行时间） a