What are the relevant attributes and characteristics of CSS3
This article mainly shows you "what are the relevant attributes and characteristics of CSS3", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the relevant attributes and characteristics of CSS3" this article.
Overview of transition Properties
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).
Value description attribute value description
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.
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 contents of the article "what are the relevant attributes and characteristics of CSS3". 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!
