 Abakada: Back to Basics > Language References > CSS Properties > Animation Properties > animation-timeline Property
Defines the timeline used with the animation.
| CSS |
{ animation-timeline: auto | none | dashed-identifier | scroll( ) | view( ) } |
| Script |
object.style.animationTimeline = auto | none | dashed-identifier | scroll( ) | view( ) |
| Parameter |
Description |
Valid Values |
| auto |
The animation’s timeline is the default document timeline. |
the keyword auto |
| none |
The animation is not associated with a timeline. |
the keyword none |
| dashed-identifier |
A named scroll progress timeline or view progress timeline if in scope. Otherwise the animation is not associated with a timeline. |
string representing the name of a scroll progress timeline or view progress timeline. |
| scroll( ) |
Use the scroll progress timeline indicated by the given scroll( ) function. |
scroll( function ) |
| view( ) |
Use the view progress timeline indicated by the given view( ) function. |
view( function ) |
The property is read/write with a default value of auto; this attribute is not inherited.
The animation-timeline property specifies the timeline that is used to control the progress of a CSS animation.
animation-timeline is specified with the possible values listed above.
 NOTE: While the separate animation properties can be set individually, the shorthand animation property offers a convenient option to set all animation properties at once.
For a brief overview, please see Understanding and Using CSS Animations.
animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function
|