What are the transition properties of css3
Today, I would like to share with you what are the relevant knowledge points about the transition attributes of css3, which are detailed in content and clear in logic. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article.
There are five kinds of css3 transition attributes: 1, transition;2, transition-property;3, transition-duration;4, transition-timing-function;5, transition-delay.
The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.
CSS transitions allow you to change property values smoothly over a given period of time.
There are 5 css3 transition properties:
Property describes the CSStransition shorthand property, which is used to set four transition properties in one property. 3transition-property specifies the name of the CSS attribute to which the transition is applied. 3transition-duration defines how long it takes to transition the effect. The default is 0. 3transition-timing-function specifies the time curve of the transition effect. Default is "ease". The 3transition-delay specifies when the transition effect begins. The default is 0. three
A CSS3 transition is the effect of a gradual change of elements from one style to another.
To achieve this, two things must be specified:
Specify the CSS property to which you want to add an effect
Specifies the duration of the effect.
Example:
Div {width:100px; height:100px; background:red; transition-property:width; transition-duration:1s; transition-timing-function:linear; transition-delay:2s; / * Safari * /-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s } div:hover {width:200px;}
Move the mouse over the div element to see the transition effect.
Note: the transition effect needs to wait two seconds before it begins.
These are all the contents of the article "what are the transitional properties of css3?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
