css 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 ;Timekeeping

function

English[ˈfʌŋkʃn] US[ˈfʌŋkʃən]

n. Function, effect; response variable, function; position; major Party

vi.Have or function; perform duties

Third person singular: functions Plural: functions Present participle: functioning Past tense: functioned Past participle: functioned

css animation-timing-function attributesyntax

What is animation-timing-function?

animation-timing-function 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.

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 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) 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 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

Home

Videos

Q&A