This article mainly introduces the usage of Animation animation property in CSS3 in detail, and teaches you how to use animation animation. Interested friends can refer to it
To use animation animation, you must first familiarize yourself with it. keyframes, the syntax rules of Keyframes: the naming starts with "@keyframes", followed by the "name of the animation" plus a pair of curly brackets "{}". In the brackets are some style rules for different time periods. Different keyframes are expressed by from (equivalent to 0%), to (equivalent to 100%) or percentage (in order to get the best browser support, it is recommended to use percentage). Define a simple animation as follows:
1 2 3 4 5 6 7 8 |
|
@Keyframes is defined. To make it work, it must be bound to a selector through animation, otherwise the animation will have no effect. The attributes of animation are listed below:
The following sets all the above attributes
1 2 3 4 5 6 7 |
|
All the above codes can be as follows Abbreviation:
1 2 |
|
Internet Explorer 10, Firefox and Opera support @keyframes rules and animation attributes.
Chrome and Safari require the prefix -webkit-.
Note: Internet Explorer 9, and earlier, does not support @keyframe rules or animation properties.
The following is a complete code example of the keyframes and animation attributes introduced above:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
|
The above code demonstrates a square moving along a square trajectory, with the cardinal number of times moving in the positive direction, and the even number Press it twice to move in the opposite direction, and the color will change during the movement. Readers can run the code to observe the specific effects.
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Analysis of scale scaling in transform of css3
About before and :after pseudo in CSS Analysis of the use of elements
About the code for replacing ellipses with ellipsis when CSS text exceeds div or span
The above is the detailed content of Analysis on the usage of Animation animation property in CSS3. For more information, please follow other related articles on the PHP Chinese website!