CSS3 Animation Transition Animation

Source: Internet
Author: User

Introduction to CSS Animation transition animation

Transition transition:CSS3 introduces the concept of time through the transitions attribute, automatically calculates the intermediate state through the start and end states, and realizes the transition effect of the state change.

Transition-property: CSS properties for applying transitions

Transition-duration: Time of transition effect

Transition-timing-function: Time curve for transition effect (state change speed)

Ease (default, gradually slows), linear, ease-in (acceleration), ease-out (deceleration), Cubic-bezier function (three Bezier curves), custom speed mode

Cubic-bezier three times Bezier curve

Transition-delay: When the transition effect starts (seconds, milliseconds)


The three-time Bezier curve is a good model for simply describing rate curves, such as Chrome Dev-tools

CSS3 Transitions Browser support conditions Can I use ie10+ support without prefix transition attribute

Use Note:

Not all CSS Properties support transition

Transition need to know the specific values of the start and end states in order to calculate the intermediate state.

Eg,height Intermediate state from 0px to auto, display:none to Block,background:url (foo.jpg) to URL (bar.jpg)

Transition Usage Limitations

Transition requires event triggering and cannot occur automatically when a page is loaded.

Transition are disposable and cannot be repeated unless triggered repeatedly

Transiton can only define the start and end states, and cannot define an intermediate state.


@keyframes to create keyframes for animation (animation name, percentage of animation duration)

@keyframes myanimation {from {background: red;} 50% { background: green;} 100% { background: blue;} }

Animation: Shorthand properties for all animated properties

Animation-name: Name of the animation created by the referenced @keyframes

Animation-duration, Animation-timing-function, Animation-delay,

Animation-iteration-count: Digital/infinite| (default 1), Animation-direction:normal/alternate (whether the animation plays backwards in the next cycle)

Animation-play-state:paused/running (default),

Animation-fill-mode:none (default)/forwards/backwards/both, which immediately jumps back from the end state to the start state when the animation is finished.

None (default), back to the state when the animation did not start

Forwards let the animation stay in the end state,

Backwards back to first frame state

Both forward and backward fill modes are applied

Note: A browser transition from one state to another is a smooth transition. The steps function allows for distributed transitions

eg div:hover {animation:1s rainbow Infinite Steps (10)}//to achieve font printing effect

CSS3 Animation Transition Animation

Related Article

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.