How to play with css animation? (organize and share)

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.

1. What is animation

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);
    }}

---

2. Calling animation

After defining the animation, you can use the animation attribute to call the animation.

Basic attributes of animation:

• name: the name of the animation
  (initial default value none)
• duration: animation duration
  (initial default value 0s)
• timing function: change speed curve
  (initial default value ease)
• delay: delay time (how much time passes before the animation starts)
  (initial default value 0s)
• iteration-count: Number of animation executions
  (Initial default value 1, if you want the animation to execute forever, write infinite)

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)

• normal: Play the animation in the normal way (initial default value)
• reverse: Play the animation in the opposite way
• alternate: Let the 2nd, 4th, 6th... (even-numbered times) of the animation be automatically reversed
• alternate-reverse: Let the odd numbers of the animation be executed Automatic reverse execution
  

animation-fill-mode (set the state of the animation when the animation is not playing)

• none: No Change the default behavior of animation
• forwards: Stop the animation at the final end state
• backwards: Apply the style in the first keyframe of the animation during the time period specified by animation-delay
• both: Follow the rules of forwards and backwards at the same time
  

animation-play-state (set whether the animation is played or paused)

• paused: Pause animation playback
• running: Play animation normally

---

3. Multi-keyframe animation

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!