Home >Web Front-end >Front-end Q&A >How to use css animation-timing-function property

How to use css animation-timing-function property

藏色散人
藏色散人Original
2019-05-29 09:33:073020browse

css The animation-timing-function property is an animation property of CSS, which is used to specify the speed curve of the animation, that is, the way the animation is played, to make the changes of the animation smoother.

How to use css animation-timing-function property

How to use the css 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 a mathematical function called the Cubic Bezier function to generate a velocity 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. 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 animation starts and ends at a low speed.

● cubic-bezier(n,n,n,n) own value in 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.

css 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>
<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。</p>
<div></div>
</body>
</html>

Effect output:

How to use css animation-timing-function property

The above is the detailed content of How to use css animation-timing-function property. For more information, please follow other related articles on the PHP Chinese website!

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