css3 animation-timing-function attribute
Translation results：
animation
英[ˌænɪˈmeɪʃn] 美[ˌænəˈmeʃən]
n. Angry, lively; cartoon production, cartoon shooting; [film and television] animation
Plural: animations
timing
## English[ˈtaɪmɪŋ] US[ˈtaɪmɪŋ] n.Timing; timing control; light distribution ;Timekeepingfunction
English[ˈfʌŋkʃn] US[ˈfʌŋkʃən] n. Function, effect; response variable, function; position; major Partyvi.Have or function; perform dutiesThird person singular: functions Plural: functions Present participle: functioning Past tense: functioned Past participle: functionedcss3 animation-timing-function attributesyntax
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 Mathematical function of Cubic Bezier function to generate 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. The animation starts at a slow speed, then speeds up, then slows down before ending. ease-in animation starts at a slow speed. ease-out The animation ends at a slow speed. ease-in-out 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.
Customize the animation speed through the animation-timing-function property in CSS3. 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, first slow, then fast and then slow down. Or you can customize the value
css3 animation-timing-function attributeexample
<!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>Run instance »
Click the "Run instance" button to view the online instance