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

Editor to share with you how to use the transition-timing-function attribute in css, 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!

CSS3transition-timing-function attribute

Function: the transition-timing-function attribute specifies the speed curve of the transition effect. This property allows the transition effect to change its speed over time.

Syntax:

Transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier

Description:

Linear: specifies the transition from start to finish at the same speed (equal to cubic-bezier).

Ease: prescribe the transition effect that starts slowly, then becomes faster, and then ends slowly (cubic-bezier (0.25pence0.1dl 0.25pl 1)).

Ease-in: specifies the transition effect that starts at a slow speed (equal to cubic-bezier).

Ease-out: specifies the transition effect that ends at a slow speed (equal to cubic-bezier).

Ease-in-out: specifies the transition effect that starts and ends slowly (equal to cubic-bezier (0.42, 0.58, and 1).

Cubic-bezier (n _ journal _ n): define your own value in the cubic-bezier function. The possible values are values between 0 and 1.

Note: InternetExplorer9 and earlier browsers do not support the transition-timing-function attribute; InternetExplorer10, Firefox, Opera, and Chrome support the transition-timing-function attribute. Safari supports the alternative-webkit-transition-timing-function attribute.

An example of using the CSS3transition-timing-function attribute

Div

{

Width:100px

Height:100px

Background:red

Margin:10px0px

}

.demo1 {

Transition:width3s

Transition-timing-function:linear

/ * Firefox4*/

-moz-transition:width3s

-moz-transition-timing-function:linear

/ * SafariandChrome*/

-webkit-transition:width3s

-webkit-transition-timing-function:linear

/ * Opera*/

-o-transition:width3s

-o-transition-timing-function:linear

}

.demo2 {

Transition:width3s

Transition-timing-function:ease

/ * Firefox4*/

-moz-transition:width3s

-moz-transition-timing-function:ease

/ * SafariandChrome*/

-webkit-transition:width3s

-webkit-transition-timing-function:ease

/ * Opera*/

-o-transition:width3s

-o-transition-timing-function:ease

}

.demo1: hover,.demo2:hover

{

Width:300px

}

Please move the mouse pointer over the red div element to see the transition effect.

Uniform transition

Start slowly, then get faster, and then end slowly.

Note: this example is not valid in InternetExplorer.

The above is all the content of the article "how to use the transition-timing-function attribute in css". 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.