How to use the animation property in CSS

This article mainly introduces the use of CSS animation properties to explain, is the basic knowledge of CSS primer learning, the need for friends can refer to the following

First, the grammar of animation
1. @keyframes--Insert KeyFrames
(1) Formto form:

@keyframes Demo {from        {          properties:properties value;        }        Percentage {          properties:properties value;        }        To {          properties:properties value;        }   }

(2) The form of percentages:

@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 created animation name. If not, no animation effects will be achieved
(2) None is the default value and none is animated
3, Animation-duration
Animation-duration:time (s)
Animation-duration is the time that the specified element lasts for 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 (acceleration) | | Ease-out (deceleration) | | Ease-in-out (accelerated and slowed down first) | | Linear (constant speed) | | Cubic-bezier (Customizing a Time curve)
Animation-timing-function is used to specify the mode of playback of the animation, with the following six ways: ease (buffer), ease-in (acceleration), ease-out (deceleration), ease-in-out (acceleration and deceleration); Linear ( Constant speed); Cubic-bezier (Customizing a Time curve).
5, Animation-delay
Animation-delay:time (s)
Animation-delay: is used to specify the element animation start time. The value is a number 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 cycles that a specified element plays an animation, with a value of number, the default value of "1" or infinite (infinite number of cycles).
7, Animation-direction
Animation-direction:normal | | Alternate
Animation-direction is the direction of the specified element animation, and if it is normal, then each cycle of the animation is played forward, and if it is alternate, then the animation plays in the first couple of times to play forward, the odd number of times in the opposite direction.
8, Animation-play-state

animation-play-state:running | | Paused

Animation-play-state is primarily used to control the playback state of element animations. Its main has two values, running and paused, where running is the default value. This property is rarely supported by the kernel at this time, so just mention it slightly.

second, animation event interface
in fact, the basic is three events: start, iteration, end. Both beginning and ending 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 the animation will start and end many times. But the real "start" and "End" events are about the entire animation, they only fire once, and the "End and start Next" event caused by repeated animations will trigger the entire iteration.
The standard name for these three events is:
Start: Animationstart
Iteration: animationiteration
End: Animationend
But the current version of Chrome needs to add WEBK It prefixes, and also note the case
Start: Webkitanimationstart
Iteration: webkitanimationiteration
End: Webkitanimationend
Finally the instance code and

<style> @-webkit-keyframes Test {0% {background:red;}     25% {background:green;}     50% {background:blue;}   100% {background:red;}     } @keyframes Test {0% {background:red;}     25% {background:green;}     50% {background:blue;}   100% {background:red;}     } </style> <script> onload=function () {var html=document.documentelement;     Defines the event callback function var start=function () {Console.log ("start");     },iteration=function (e) {console.log (e);     },end=function () {Console.log ("end");     };     Bind event Html.addeventlistener ("Webkitanimationiteration", iteration);     Html.addeventlistener ("Animationiteration", iteration);     Html.addeventlistener ("Webkitanimationstart", start);     Html.addeventlistener ("Animationstart", start);     Html.addeventlistener ("Webkitanimationend", end);     Html.addeventlistener ("Animationend", end);   Start the execution of the animation html.style.animation= html.style.webkitanimation= "test 1s linear 0s 3";  }; </script> 

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!