Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use the transition attribute in Css3 technology, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

You can make the animation at the CSS level, not using setInterval () or timer, but the underlying C++ in rendering. The quality and smoothness of rendered animation are far better than those of JS and jQuery.

In order to subvert our traditional way of thinking of making web animation, there is absolutely no animation done by setInterval () in the current mobile phone page, but is realized by transition.

The same will happen on the PC side in the next 2-3 years, and the setInterval () and animate functions will be eliminated in the transition.

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

Transition-property specifies the name,transition effect of the CSS attribute none has no attribute to get a transition effect.

All properties of all will have a transition effect.

Property defines a comma-separated list of CSS attribute names to which the transition effect is applied.

The transition-duration transition effect specifies how many seconds or milliseconds it takes to complete the specified transition effect (in seconds or milliseconds).

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

Transition-timing-function

Specify the speed curve of the transition effect

The transition from linear to end at the same speed (equal to cubic-bezier).

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

The transition effect of ease-in starting at a slow speed (equal to cubic-bezier (0.42)).

The transition effect of ease-out ending at a slow speed (equal to cubic-bezier).

The transition effect of ease-in-out starting and ending at a slow speed (equal to cubic-bezier (0.42, 0.58).

Cubic-bezier defines its value in the cubic-bezier function. The possible values are values between 0 and 1.

Transition-delay defines the start of the transition effect by specifying the number of seconds or milliseconds before waiting for the switching effect to begin.

What attributes can participate in the transition?

Almost all CSS properties can be transitioned.

JQuery transition

Background-color

Background-position

Background-image

Any deformed transform can transition.

What are the trigger conditions for transition animation?

Any change to the CSS will trigger the transition. For example: hover, add and subtract classes, simply set CSS directly.

For example:

Setting up CSS directly causes the transition to animate:

Document.getElementById ("box") .style.width = "300px"

A change in the class name causes a transition animation:

Document.getElementById ("box") .className = "long"

Special note: transition cannot inherit.

The above is all the content of the article "how to use the transition attribute in Css3 Technology". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.