CSS3 Action Animation Essentials

CSS3 has 3 types of animation-related properties: Transform, transition, animation.

Different points:

1. Trigger conditions are different. Transition is usually used in conjunction with events such as hover and is triggered by events. The animation is similar to the GIF animated diagram and plays immediately.

2. Cycle. Animation can set the number of cycles.

3. Accuracy. Animation can set the style and time of each frame. Tranistion can only be set to the tail. In animation, you can set style properties that each frame needs to change individually, and all style attributes in the transition change together.

4. Interacting with JavaScript. The interaction between animation and JS is not very close. The combination of tranistion and JS is more powerful. JS set to change the style, transition is responsible for animation effect, make a perfect match, than before can only use JS when cool too much.

Conclusion:

1. If you want to flexibly customize multiple frames and loops, use animation.

2. If you want a simple from-to effect, use transition.

3. If you want to use JS to set animation properties flexibly, use transition.

CSS3 Action Animation Essentials