animation-timeline
The animation-timeline
CSS property specifies the names of one or more @scroll-timeline
at-rules describing the scroll animations to apply to the element.
It is often convenient to use the shorthand property animation
to set all animation properties at once.
Syntax
/* Single animation */
animation-timeline: none;
animation-timeline: test_05;
animation-timeline: -specific;
animation-timeline: sliding-vertically;
/* Multiple animations */
animation-timeline: test1, animation4;
animation-timeline: none, -moz-specific, sliding;
/* Global values */
animation-timeline: initial;
animation-timeline: inherit;
animation-timeline: revert;
animation-timeline: unset;
Values
auto
-
The animation's timeline is the document's default DocumentTimeline.
none
-
The animation is not associated with a timeline.
<timeline-name>
-
A
<custom-ident>
or string identifying the scroll timeline, declared with the@scroll-timeline
rule. If two or more scroll timelines share the same name, the last declared within the cascade will be used. If no matching scroll timeline is found, the animation is not associated with a timeline.
Formal definition
Initial value | auto |
---|---|
Applies to | all elements |
Inherited | no |
Computed value | listEachItemIdentifyerOrNoneAuto |
Animation type | discrete |
Formal syntax
<single-animation-timeline>#
Examples
Simple example
A scroll timeline named squareTimeline
is declared and applied to the #square
element using animation-timeline: squareTimeline
.
HTML
<div id="container">
<div id="square"></div>
</div>
CSS
#container {
height: 300px;
}
#square {
background-color: deeppink;
width: 100px; height: 100px;
margin-top: 100px;
animation-name: rotateAnimation;
animation-duration: 3s;
animation-direction: alternate;
animation-timeline: squareTimeline;
}
@scroll-timeline squareTimeline {
source: selector('#container');
orientation: "vertical";
scroll-offsets: 0px, 300px;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Result
Specifications
Specification |
---|
CSS Animations Level 2 # animation-timeline |
Browser compatibility
BCD tables only load in the browser