animation-timeline

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

La propriété CSS animation-timeline indique le nom d'une ou plusieurs règles @ @scroll-timeline décrivant les animations de défilement à appliquer à l'élément.

Il est généralement plus pratique d'utiliser la propriété raccourcie animation afin de définir l'ensemble des propriétés relatives à une animation en une fois.

Syntaxe

css
/* Une seule animation */
animation-timeline: none;
animation-timeline: test_05;
animation-timeline: -specific;
animation-timeline: sliding-vertically;

/* Plusieurs animations */
animation-timeline: test1, animation4;
animation-timeline:
  none,
  -moz-specific,
  sliding;

/* Valeurs globales */
animation-timeline: inherit;
animation-timeline: initial;
animation-timeline: revert;
animation-timeline: revert-layer;
animation-timeline: unset;

Valeurs

auto

La chronologie de l'animation est la chronologie par défaut du document (DocumentTimeline).

none

L'animation n'est associée à aucune chronologie.

<timeline-name>

Un identifiant (custom-ident) ou une chaîne de caractères identifiant la chronologie de défilement, déclarée via une règle @scroll-timeline. Si deux chronologies de défilement (ou plus) partagent le même nom, c'est la dernière déclarée au sein de la cascade qui sera utilisée. Si aucune chronologie de défilement correspondante n'est trouvée, l'animation ne sera pas associée à une chronologie.

Définition formelle

Valeur initialeauto
Applicabilitétous les éléments
Héritéenon
Valeur calculéea list, each item either a case-sensitive CSS identifier or the keywords none, auto
Type d'animationNot animatable

Syntaxe formelle

animation-timeline = 
<single-animation-timeline>#

<single-animation-timeline> =
auto |
none |
<dashed-ident> |
<scroll()> |
<view()>

<scroll()> =
scroll( [ <scroller> || <axis> ]? )

<view()> =
view( [ <axis> || <'view-timeline-inset'> ]? )

<scroller> =
root |
nearest |
self

<axis> =
block |
inline |
x |
y

<view-timeline-inset> =
[ [ auto | <length-percentage> ]{1,2} ]#

<length-percentage> =
<length> |
<percentage>

Exemples

Définir une chronologie de défilement

Dans cet exemple, on déclare une chronologie de défilement intitulée squareTimeline qu'on applique à l'élément #square en utilisant animation-timeline: squareTimeline.

HTML

html
<div id="container">
  <div id="square"></div>
</div>

CSS

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

Résultat

Faites défiler le cadre pour observer l'animation.

must be provided

Spécifications

Specification
CSS Animations Level 2
# animation-timeline

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-timeline
Experimental
scroll()
Experimental
view()
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.

Voir aussi