How to use transition animation in CSS3

We know that there is a transition attribute in CSS3, which allows animation to be implemented at the CSS level. It is neither setInterval() nor timer, but the underlying C++ is rendering, so that The quality and smoothness of rendered animation are far superior to JS and jQuery. Let’s take a look at the specific use of this transition attribute today.

To subvert our traditional thinking mode of making web page animations, in today's mobile pages, there will never be any animation completed by setInterval(), but all animations are implemented in transition.

Syntax: transition: property duration timing-function delay; The unit of time is: seconds (s).

transition-property specifies the name of the CSS property, transition effect none If there is no attribute, transition effect will be obtained.

all All properties will receive the transition effect.

property defines a list of CSS property names that apply transition effects. The list is separated by commas.

transition-duration Specify how many seconds or milliseconds the transition effect needs to complete Specify the time (in seconds or milliseconds) it takes to complete the transition effect.

The default value is 0, which means there will be no effect.

transition-timing-function

Specify the speed curve of the transition effect

linear Transition effect that starts and ends at the same speed (equal to cubic-bezier(0,0,1 ,1)).

ease The transition effect starts slowly, then becomes faster, and then ends slowly (cubic-bezier(0.25,0.1,0.25,1)).

ease-in Transition effect that starts at a slow speed (equal to cubic-bezier(0.42,0,1,1)).

ease-out transition effect that ends at a slow speed (equal to cubic-bezier(0,0,0.58,1)).

ease-in-out Transition effect that starts and ends at a slow speed (equal to cubic-bezier(0.42,0,0.58,1)).

cubic-bezier(n,n,n,n) defines its own value in the cubic-bezier function. Possible values ​​are between 0 and 1 .

transition-delay defines when the transition effect starts. Specify the number of seconds or milliseconds to wait before the switching effect starts.

What attributes can participate in the transition?

Almost all CSS attributes can transition.

JQuery transition

background-color

background-position

background-image

Any deformation transform can transition

Trigger conditions for transition animation

Any change in CSS will trigger the transition. For example: hover, adding and subtracting categories, or simply setting CSS directly.

document.getElementById("box").style.width = "300px";

Changing the class name will trigger a transition animation:

document.getElementById("box ").className = "long";

Special note: transition cannot be inherited.

There are so many ways to use the transition attribute. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

What new background attributes are there in CSS3

How to use CSS3 Media query

How to make a flexible box in css3

The above is the detailed content of How to use transition animation in CSS3. For more information, please follow other related articles on the PHP Chinese website!