English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS3 animation-timing-The function property specifies how the CSS animation should proceed during the duration of each cycle.
The following table summarizes the usage context and version history of this property.
| Default value: | ease |
|---|---|
| Applies to: | All elements::before and::after Pseudo-element |
| Inheritance: | None |
| Animated by: | No.See also Animation properties. |
| Version: | CSS3new feature |
| JavaScript syntax: | object object.style.animationTimingFunction="linear" |
The syntax of this property is as follows:
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit
The following example demonstrates how to use the animation-timing-function attribute.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-in;
animation-name: moveit;
animation-duration: 2s;
animation-timing-function: ease-in;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Test see‹/›The following table describes the values of this attribute.
| Value | Description |
|---|---|
| linear | Specify that the animation enters its final state from its initial state at a constant speed. |
| ease | Similar to fade in and out, although it accelerates faster at the beginning and has started to decelerate near the middle. |
| ease-in | Specify that the animation starts slowly, then accelerates gradually until it reaches the final state and the animation stops suddenly. |
| ease-out | Specify that the animation starts quickly and then slows down gradually as it approaches its final state. |
| ease-in-out | Specify that the animation starts slowly, then accelerates and then decelerates as it approaches its final state. |
cubic-bezier(n,n,n,n) | Define a cubic Bezier curve. Also known as a speed curve. Possible values are from 0 to1values. |
| initial | Set this property to its default value. |
| inherit | If specified, the associated element adopts its parent element's animation-timing-Computed value of the function attribute. |
animation-timing-Browser compatibility of the function attribute, all mainstream browsers support this attribute.
|
Please refer to the following tutorials:CSS3Animation.
Related properties and rules:animation,animation-name,animation-duration,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,@keyframes.