In-depth understanding of how to use transition in CSS3

Animation can be implemented at the CSS level. At this time, instead of using setInterval() or timer, the underlying C is used for rendering. The quality and smoothness of the rendered animation are far superior to JS and jQuery.

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. In the next 2 to 3 years, the PC side will also be like this, and the setInterval() and animate functions will be eliminated in the transition.

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

transition-property specifies the name of the CSS property, and the transition effect is none. If there is no attribute, the transition effect will be obtained. all All properties will receive the transition effect. property defines a comma-separated list of CSS property names that apply the transition effect. transition-duration Specifies 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, meaning there will be no effect.

transition-timing-function specifies 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) Define your own values 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 properties can be transitioned.
JQuery transition
background-color
background-position
background-image
Any deformation transform can transition

Trigger conditions for transition animation?

Any change to CSS will trigger a transition. For example: hover, adding and subtracting categories, or simply setting CSS directly.
For example:
Setting CSS directly will trigger a transition animation:

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.

The above is the detailed content of In-depth understanding of how to use transition in CSS3. For more information, please follow other related articles on the PHP Chinese website!