CSS3 Animation animation corresponding Property interpretation

Animation

Value: [<animation-name> | | <animation-duration> | | <animation-timing-function> | | <animation-de lay> | | <animation-iteration-count> | | <animation-direction> | | <animation-fill-mode>] [, [<animation-name> | | <animation-duration> | | < animation-timing-function> | | <animation-delay> | | <animation-iteration-count> | | <animation-direction> | | <animation-fill-mode>]]*

Animation-timing-function:

Define the speed curve of an animation

Ease: The animation starts at low speed, then accelerates and slows down before it ends.

Linear: Constant speed

Ease-in: Animations start at low speed

Ease-out: Animation ends at low speed

Ease-in-out: Animation starts and ends at low speed, is slower and more evenly compared to ease

Step-start: Set frame by keyframes, first frame is the first frame set by keyframes.

Step-end: Set frame by keyframes, first frame is the initial value of the style.

Steps (<number>[, [start | end]]?) : Divides a frame in the keyframes into several frames, start is the first display of the first frame, and end displays the initial value of the style for the first time, for example: Steps (4,start)

Cubic-bezier (<NUMBER>, <number>, <number>, <number>): its own value in the Cubic-bezier function. The possible values are numbers from 0 to 1. The Bezier curve limits the position of the two control points and can be used flexibly by adjusting the position of the middle two control points.

Animation-iteration-count

Animation iteration number, the default is 1 times, can be set 2 times, 3 times, 4 times, ... infinite means infinite

Animation-duration

Refers to the duration of an animation cycle. Unit seconds S or Ms Ms.

Animation-delay

Refers to the animation delay execution time. Unit seconds S or Ms Ms.

Animation-direction

refers to the direction in which frames advance on the animation timeline.

Normal: The default value, which means to go forward and return to the first frame at the end of the last frame

Reverse: Contrary to normal's running direction

Alternate: After the play is finished, then rewind the tape, rewind the head and play back

Alternate-reverse: Opposite to Alternate's direction of operation

Animation-fill-mode

Set the state after the animation has ended

None: Default value. Do not set state outside of object animation, Dom does not animate before state

Forwards: Sets the state of the object to the end of the animation, 100% or to when the animation ends when the animation-direcdtion is set to reverse the first frame of the keyframes

Backwards: Sets the state of the object at the start of the animation (test shows that the DOM is not animated before the state)

Both: Sets the state of the object to the end or start of the animation, and the end state takes precedence

Animation-play-state

Paused: Set this property to pause the animation

Running: Set this property to keep the animation playing

Animation run state, pause or resume playback, properties are: Running (default), and paused. When this is useful, when using animation to achieve the video playback effect

Browser support (WebKit kernel browser requires "-webkit-" prefix):

Simple example:

[HTML]View PlainCopy 

1. DIV&NBSP;{&NBSP;&NBSP;
2.   animation-name:  diagonal-slide;  
3. &NBSP;&NBSP;ANIMATION-DURATION:&NBSP;5S;&NBSP;&NBSP;
4.   animation-iteration-count: 10;  
5. }&NBSP;&NBSP;
6.    
7. @keyframes  diagonal-slide {  
8.   
9. &NBSP;&NBSP;FROM&NBSP;{&NBSP;&NBSP;
10.     left: 0;  
11. &NBSP;&NBSP;&NBSP;&NBSP;TOP:&NBSP;0;&NBSP;&NBSP;
12.   }  
13. &NBSP;&NBSP;
14.   to {  
15.     left: 100px;   
16.     top: 100px;  
17.   }   
18.   
19.  

CSS3 Animation Animation corresponding Property interpretation