What is the use of the animation-timing-function attribute in css
This article will explain in detail what is the use of the animation-timing-function attribute in css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.
CSS3animation-timing-function attribute
Function:
Animation-timing-function specifies the speed curve of the animation. The speed curve defines the time it takes for an animation to change from one set of CSS styles to another. The velocity curve is used to smooth the change.
Syntax:
Animation-timing-function:value
Description:
Animation-timing-function uses a mathematical function called the cubic CubicBezier function to generate a speed curve. You can use your own values or predefined values in this function:
Linear: the speed of the animation is the same from beginning to end.
Ease: default value. The animation starts at a low speed, then speeds up, and slows down before it ends.
Ease-in: the animation starts at a low speed.
Ease-out: the animation ends at a low speed.
Ease-in-out: the animation starts and ends at a low speed.
Cubic-bezier (n _ journal _ n): its own value in the cubic-bezier function. The possible values are values from 0 to 1.
Note: the animation-timing-function attribute is not supported in InternetExplorer9 and earlier versions.
An example of using the CSS3animation-timing-function attribute
Div
{
Width:100px
Height:100px
Background:red
Position:relative
Animation:mymove5sinfinite
Animation-timing-function:linear
/ * SafariandChrome*/
-webkit-animation:mymove5sinfinite
-webkit-animation-timing-function:linear
}
@ keyframesmymove
{
From {left:0px;}
To {left:200px;}
}
@-webkit-keyframesmymove/*SafariandChrome*/
{
From {left:0px;}
To {left:200px;}
}
This is the end of this article on "what is the use of animation-timing-function attributes in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.
