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

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.

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.