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

css3 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

Popular Recommendations

Home

Videos

Q&A

submit