CSS3 Animation Animation

　　Animation Custom Animation is a CSS animation three properties one of the three elements of the CSS animation is: transform,translate,Animation. The animation name applied by the element must be used in conjunction with the rule @keyframes keyframe , because the animation name is defined by the @keyframes .

and @keyframes keyframes have their own grammar rules, must start with the @keyframes , followed by the animation name (custom, semantically a little better), and then in addition to the "{}", the parentheses are some different time-period style rules.

@keyframes syntax: @keyframes <identifier>{[from | to | <percentage>]}

@keyframes IDENT{From {Properties:Properties Value; }Percentage{Properties:Properties Value; } to{Properties:Properties Value; }} or all written as percentages: @keyframes IDENT{0% {Properties:Properties Value; }Percentage{Properties:Properties Value; }100%{Properties:Properties Value; }    }

First, Animation-name:

Animation-name: Is the name used to define an animation, and the Animation-name property specifies a name for the @keyframes animation.

Animation-name Syntax: Animation-name:none | <identifier>

Div { animation-name: ident;}

Second, Animation-duration:

　　Animation-duration is used to specify how long the element lasts for an animation, and the value:<time> is the value, in s (seconds). Its default value is "0". This property is the same as the transition-duration used in transition.

Syntax: animation-duration:<time>

Div { animation-duration:1s;}

Third, Animation-timing-function:

　　Animation-timing-function: Refers to the element according to the time of the advance to change the property value of the transformation rate, the simple point is the way the animation play. Just like the transition-timing-function in transition.

Syntax: animation-timing-function: Ease | linear | ease-in | ease-out | ease-in-out

Div { animation-timing-function:ease-in;}

Four, Animation-delay:

　　Animation-delay: is used to specify the element animation start time. The value is <time> as the value, in s (seconds), and the default value is 0. This property is the same as the Transition-delay use method.

Syntax: animation-delay:<time>

Div { animation-delay:1s;}

Wu, Animation-iteration-count

Animation-iteration-count is used to specify the number of cycles that an element plays an animation, which can take a value of <number> as a number, with a default value of "1" and a infinite loop for an infinite number of times.

Syntax: animation-iteration-count: Infinite | <number>

Div { Animation-iteration-count:2;} Div { Animation-iteration-count:infinite;}

Liu, Animation-direction

　　The animation-direction is used to specify the direction in which the element animation plays.

Syntax: Animation-direction:normal | Reverse | Alternate | Alternate-reverse

1) Normal: Regular direction
2) Reverse: Running in the direction of discharge
3) Alternate: The animation runs normally and then in the direction and runs continuously alternately
4) Alternate-reverse: Animation first put the direction of operation and then normal operation, and continuous alternating operation

Div { animation-direction:reverse;}

Seven, Animation-play-state

　　Animation-play-state is primarily used to control the playback state of element animations. There are mainly two values, running and paused where running is the default value.

Syntax: ainmation-play-state: running | paused

1) Running: Sports
2) Paused: Pause

Div { animation-play-state:paused;}

Eight, Animation-fill-mode

Animation-fill-mode setting the state outside the object's animation time

Syntax: Animation-fill-mode: None | forwards | backwards | both

1) None: Default value. Does not set the state outside the object animation.
2) Forwards: Sets the state of the object state at the end of the animation.
3) Backwards: Sets the state of the object state when the animation starts.
4) Both: Sets the state of the object to the end or start of the animation.

Div { Animation-fill-mode:forwards;}

Animation attribute a shorthand method:

Animation:<animation-name> | | <animation-duration> | | <animation-timing-function> | | <animation-delay> | | <animation-iteration-count> | | <animation-direction>
|| <animation-play-state> | | <animation-fill-mode> [, *]

：

　　　　

Browser compatible:

Reference blog: Click

CSS3 Animation Animation