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