A detailed description of CSS implementation animations and examples

CSS3 http://www.php.cn/html5/html5-4-mip-animate.html "target=" _blank "> Animation

In CSS3, you can create complex animation sequences by animation, like the Transition property, which controls the properties of CSS to animate.
The animation effect of animation is mainly composed of two parts.

1. Declare an animation by using keyframes similar to those in a flash animation.

2. A more complex animation effect is achieved by invoking the animation of the Keyframe declaration in the animation property.

Declaring keyframes

In CSS3, KeyFrames is @ called a keyframe.
　　@keyframes syntax rules: Naming is started by @ KeyFrames, followed by the name of the animation (Animation-name), plus a pair of curly braces "{...}", which is a style rule for several different time periods in parentheses. A @ style rule in a keyframes is made up of multiple percentages, and each percent style rule can set different style properties. The keyword "from" can be used, "to" represents the beginning and end of an animation, "from" is equivalent to the 0%, "to" equivalent to 100%.

@keyframes Yxz {0% {    margin-left:100px;    Background:green; } 40% {    margin-left:150px;    Background:orange; } 60% {    margin-left:75px;    Background:blue; } 100% {    margin-left:100px;    background:red; }}

Here we define a "yxz" animation, his animation is from 0% to 100% end, also experienced a 40% and 60% two process, the above code specifically means: "YXZ" animation at 0% when the element is positioned to the left 100px position of the background color green, Then 40% when the element transitions to the left 150px position and the background color is orange,60% when the element transitions to the left 75px position, the background color is blue, the last 100% end animation position element back to the starting point left 100px, the background color into red. False setting we only give this animation a 10s execution time, then the status of each of his executions is as follows:

KeyFrames in @ keyframes are not necessarily specified in order, and keyframes can be specified in any order, because the keyframe order in the animation is determined by the percentage value rather than the order of the Declaration.

@keyframes yxz{    0%,40%{        width:200px;        height:200px;    }    20%,60%,80%{        width:100px;        height:100px;    }    100%{        width:0;        height:0;}    }

In this example, 0%,40% applies the same style, the same style is applied to the 20%,60%,80%, and 100% is another style.
These two animations, because they are not attached to any element, are ineffective. @after you declare the keyframes animation, you need to invoke the animation of the KeyFrames declaration through the CSS property to make the animation effective @ .

Call KeyFrames

Use the animation properties animation @ to invoke KeyFrames declared animations. The animation property, animation, is a composite property that contains eight sub-properties. Its syntax is as follows:

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

　　animation-name: Used primarily to specify the name of a keyframe animation, which is the same name as the @ keyframes declaration. When the CSS loads the animation, it applies the corresponding name to execute.

Animation-name:none | IDENT [, none | IDENT] *

IDENT: Is @ the name of the animation created by KeyFrames.
None: The default value is None, and there is no animation effect that can be used to overwrite the animation.

　　animation-duration: Used primarily to set the time required for an animation to play, in S (s) or MS (milliseconds), and the default value is 0.

animation-duration:<time> [, <time>] *

　　animation-timing-function: Mainly used to set the playback speed of the animation mode.

Similar to Transition-timing-function, click to view.

　　animation-delay: Used primarily to set animation delay time.

animation-duration:<time> [, <time>] *

When time is a positive integer, it is a delay, and a negative integer truncates the playback time (part of the time used to truncate the animation-duration, that is, skipping this part of the value, directly following the animation)

　　animation-iteration-count: Used primarily to set the number of times an animation is played.

Animation-iteration-count:infinite | <number> [, Infinite | <number>] *

is usually an integer, or a floating-point number can be used. The default value is 1. If the value is infinite, the animation will play indefinitely.

　　animation-direction: Used primarily to set the direction of animation playback.

Animation-direction:normal | alternate [, Normal | alternate] *

The default value is normal, and the animation is played forward for Each loop. Alternate, the animation plays forward once and plays back one time.

　　animation-play-state: Mainly used to control the state of animation playback.

animation-play-state:running | Paused [, running | paused] *

Running is the default value, which is the meaning of playback, which can be stopped by paused.

　　Animation-fill-mode: Used primarily to set properties other than animation time, that is, before or after the start of an animation.

Animation-fill-mode:none | Forwards | Backwards | Both

The default value is None, which indicates that the animation executes and ends on schedule and returns to its original state at the end of the animation. Forwards, when the animation ends, stays at the last last frame (the last state remains). Backwards, the first frame is applied quickly when the animation starts. Both, and has the function of forwards and backwards.

After learning the basics of animation, you need to practice and use the learning stuff. You can copy the code in the browser to see the effect.

<! DOCTYPE html>


CSS3 Animation finished.