What is the use of the animation-timing-function attribute?-CSS Tutorial-php.cn

What is the use of the animation-timing-function attribute?

青灯夜游

Release： 2019-01-31 11:01:33

Original

3847 people have browsed it

The animation-timing-function attribute is used to set the speed curve of the animation. It can set the animation speed to a constant speed, start at a low speed, end at a low speed, start and end at a low speed, slow first, then fast and then slow down, or by itself Custom value.

What is the use of the animation-timing-function attribute?

CSS3 animation-timing-function property

Function:

animation-timing-function specifies the speed curve of animation. The velocity curve defines how long it takes for the animation to change from one set of CSS styles to another. Speed curves are used to make changes smoother.

Syntax:

animation-timing-function: value;

Copy after login

Description:

animation-timing-function uses the name Cubic Bezier ) function to generate the speed curve. You can use your own values in this function, or predefined values:

linear: The speed of the animation is the same from beginning to end.

ease: Default value. The animation starts at a slow speed, then speeds up, then slows down before ending.

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 slow speed.

cubic-bezier(n,n,n,n): its own value in the cubic-bezier function. Possible values are numeric values from 0 to 1.

Note: Internet Explorer 9 and earlier versions do not support the animation-timing-function attribute.

CSS3 animation-timing-function property usage example

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-timing-function:linear;

/* Safari and Chrome */
-webkit-animation:mymove 5s infinite;
-webkit-animation-timing-function:linear;
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Copy after login

Rendering:

What is the use of the animation-timing-function attribute?

The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of What is the use of the animation-timing-function attribute?. For more information, please follow other related articles on the PHP Chinese website!