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

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.

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.