Home > Article > Web Front-end > What is the use of the animation-timing-function attribute?

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

青灯夜游Original: 2019-01-31 11:01:333805browse

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.

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;

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>

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!

php css css3 function animation

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the use of the animation-duration attribute?Next article：What is the use of the animation-duration attribute?

See more

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

Related articles