How to use the transition-timing-function attribute in css
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!
