CSS Animation properties using the example explained

The grammar of a animation

1, @keyframes--insert KeyFrames

(1) Formto form:

CSS code copy content to clipboard

@keyframes Demo {

from {

Properties:properties value;

}

Percentage {

Properties:properties value;

}

to {

Properties:properties value;

}

}

(2) The form of a percentage:

CSS code copy content to clipboard

@keyframes Demo {

0% {

Properties:properties value;

}

Percentage {

Properties:properties value;

}

100% {

Properties:properties value;

}

}

　2, animation-name--define the name of the animation

Animation-name:none | "Name of the animation";

(1) The name of the animation is the animated name created by KeyFrames, which must be consistent with the animated name created. If inconsistent, you will not be able to achieve any animation effects

(2) None is the default, and none is on, there will be no animation effect

　3, Animation-duration

Animation-duration:time (s)

Animation-duration is the duration of the specified element to play the animation, with a value of seconds (s) and a default value of "0".

　4, Animation-timing-function

Animation-timing-function:ease (buffer) | | Ease-in (accelerated) | | Ease-out (deceleration) | | Ease-in-out (acceleration and deceleration) | | Linear (uniform) | | Cubic-bezier (Customize a Time curve)

Animation-timing-function is used to specify how the animation is played, with the following six modes of transformation: ease (buffering), ease-in (acceleration), ease-out (deceleration), ease-in-out (acceleration and deceleration); Linear ( uniform); Cubic-bezier (custom a time curve).

　5, Animation-delay

Animation-delay:time (s)

Animation-delay: is used to specify the element animation start time. Values are numeric, in seconds (s), and the default value is "0". This property is the same as the Animation-duration use method.

　6, Animation-iteration-count

Animation-iteration-count:infinite | | Number

Animation-iteration-count is the number of times the specified element plays the animation, the value is a number, the default value is "1" or infinite (infinite number of loops).

　7, Animation-direction

Animation-direction:normal | | Alternate

Animation-direction is the direction of the specified element animation, if normal, then each cycle of the animation is played forward, if it is alternate, then the animation playback in the number of times forward, the odd number of times to play in the opposite direction.

　　8, Animation-play-state

animation-play-state:running | | Paused

Animation-play-state is mainly used to control the playback state of element animations. It has two main values, running and paused, where running is the default value. This property currently has very little kernel support, so just a little mention.

　　Second, animation event interface

In fact, at present the basic is three events only: Start, iteration, end. The beginning and the end know what it means. As for this iteration, because there is a Iteration-count attribute in animation, it can define the number of times the animation repeats, so there are many times when the animation starts and ends. But the real "start" and "End" events are about the entire animation, they only trigger once, and the "End and start the next time" caused by repeated animations will trigger the entire "Iteration" event.

　The standard names for these three events are:

Start: Animationstart

Iteration: Animationiteration

End: Animationend

But the current version of Chrome needs to be prefixed with the WebKit, and also to be careful of case

Start: Webkitanimationstart

Iteration: Webkitanimationiteration

End: Webkitanimationend

Finally, the example code and screenshot

　CSS Code copy content to clipboard

2. <style>
4. @-webkit-keyframes Test {
6. 0% {background:red;}
8. 25% {background:green;}
10. 50% {background:blue;}
12. 100% {background:red;}
14. }
16. @keyframes Test {
18. 0% {background:red;}
20. 25% {background:green;}
22. 50% {background:blue;}
24. 100% {background:red;}
26. }
28. </style>
30. <script>
32. Onload=function () {
34. var html=document.documentelement;
36. Defining an event callback function
38. var start=function () {
40. Console.log ("Start");
42. },iteration=function (e) {
44. Console.log (e);
46. },end=function () {
48. Console.log ("End");
50. };
52. Binding events
54. Html.addeventlistener ("webkitanimationiteration", iteration);
56. Html.addeventlistener ("animationiteration", iteration);
58. Html.addeventlistener ("Webkitanimationstart", start);
60. Html.addeventlistener ("Animationstart", start);
62. Html.addeventlistener ("Webkitanimationend", end);
64. Html.addeventlistener ("Animationend", end);
66. Start animation
68. html.style.animation=
70. html.style.webkitanimation=
72. "test 1s linear 0s 3";
74. };
76. </script