CSS3 Action Animation Essentials

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.