This article brings you relevant knowledge about animation in CSS, including what animation is, how to call animation, and how to implement multi-keyframe animation. I hope it will be helpful to you.
In CSS, you can use @keyframes to define animation
(keyframes means " Keyframe")
General structure:
@keyframes rotation { /* rotation 动画名 */ from { /* 起始状态 */ transform: rotate(0); } to { /* 结束状态 */ transform: rotate(360deg); }}
After defining the animation, you can use the animation attribute to call the animation.
Basic attributes of animation:
animation: name | duration | timing function | delay | iteration-count;
In addition, there are some attributes :
animation-direction (Set whether to play the animation in reverse in turn)
animation-fill-mode (set the state of the animation when the animation is not playing)
animation-play-state (set whether the animation is played or paused)
For those who want to achieve multiple For animation with this effect, you can use multiple keyframes at this time.
General structure:
@keyframes changeColor { 0% { background-color: red; } 20% { background-color: orange; } 40% { background-color: blue; } 100% { background-color: green; }}
(Learning video sharing: css video tutorial)
The above is the detailed content of How to play with css animation? (organize and share). For more information, please follow other related articles on the PHP Chinese website!