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

This article mainly introduces what the transition transition attribute of CSS is, which is very detailed and has certain reference value. Friends who are interested must finish it!

The transition attribute is used when showing a change in time, specifically, you can gradually change the background color by clicking the cursor, etc., as well as other animation properties, but the transition attribute is used for relatively simple changes.

Let's take a specific look at the use of the transition attribute.

Let's first look at the parameters of the transition property.

-webkit-transition-property: changed attribute (background attribute, etc.)

-webkit-transition-duration: number of seconds of change

-webkit-transition-timing-function: the method of change

-webkit-transition-timing-function has the following values

Default

Linear: uniform speed

Ease-in: speed up gradually

Ease-out: slow down gradually

Ease-in-out: gradual acceleration and gradual acceleration

Cubic-bezier: customizin

You can also use the following abbreviations

-webkit-transition: the method of changing the number of seconds changed by attributes

Let's take a look at specific examples.

The code is as follows

HTML code

CSS code

# demo {

Height:100px

Width:200px

Background:rgb (255100100)

-webkit-transition-property:background

-webkit-transition-duration:1s

-webkit-transition-timing-function:linear

}

# demo:hover {

Background:rgb (100255100)

}

# demo2 {

Height:100px

Width:200px

Background:rgb (255100100)

-webkit-transition:background2sease-in-out

}

# demo2:hover {

Background:rgb (100100255)

}

The above is all the content of the article "what are the transition transition properties of CSS". Thank you for reading! Hope to share the content to help you, more related 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.