animation-timelinenone | autoautoanimation-timeline ne peut pas être animée.animation-timeline.animation-timeline.Description des termes utilisés sur le schéma :
name est un identifiant défini au préalable.axis est l'indication d'un axe : inline, block,x ou y.length est une valeur numérique suivie d'une des unités de dimension.animation-timeline.La propriété animation-timeline permet d'associer une animation à autre chose que le temps.
Par défaut, une animation est une variation de la valeur d'une propriété en fonction du temps, compté à partir du chargement de la page (temps 0).
Avec animation-timeline il est possible de faire varier la valeur d'une propriété en fonction d'autre chose que le temps, le plus souvent
le défilement (scrolling) d'un élément.
Par exemple : l'opacité de l'élément ci-dessous est associée à son défilement. ⚠ Attention ! Cela ne fonctionne pas encore avec tous les navigateurs.
0 sinon il vous aurait été impossible de lire la fin de ce texte.animation-timeline.L'animation est synchronisée sur la ligne de temps du document.
L'animation n'est associée à aucune ligne de temps, pas même celle du document par défaut : elle ne se déroule plus.
--xxx est un identifiant précédé d'un double tiret. Il doit avoir été défini avec la propriété scroll-timeline-name ou la propriété résumée
scroll-timeline.
La fonction scroll() accepte deux arguments : l'axe à prendre en compte, et l'élément dont le défilement servira à synchroniser
l'animation.
Le paramètre x peut prendre une des valeurs suivantes :
blockinlinexyLes valeurs horizontal et vertical sont reconnues par Firefox mais ne sont pas standardisées.
Le paramètre s peut prendre une des valeurs suivantes :
root : le document dans son ensemble.nearest : l'élément défilable le plus proche dans les parents.self : l'élément lui-même : celui sur lequel l'animation est appliquée.Avec view() la ligne de temps est calée sur la visibilité d'un élément. Celui-ci doit donc faire partie du contenu qui défile.
a : l'axe à considérer (block, inline, x ou y).
Ce paramètre est optionnel : la valeur est par défaut block.
b : fin de l'animation (coté to de la directive @keyframes). Il s'agit d'un pourcentage ou d'une longueur,
positif ou négatif.
S'il s'agit d'un pourcentage il est calculé par rapport à la dimension de l'élément qui défile, dans le sens de l'axe de défilement.
Dans le cas d'une valeur négative, l'animation démarre alors que l'élément n'est pas encore affiché.
c : début de l'animation (coté from de la directive @keyframes). Un pourcentage ou une longueur, positif ou négatif.
Ces deux valeurs sont calculées conformément au dessin ci-dessous.
animation-timeline: initial (auto)
animation-timeline: inherit
animation-timeline: revert
animation-timeline: revertLayer
animation-timeline: unset
Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.
animation-timeline.Voici une petite application amusante de la possibilité de synchroniser la valeur d'une propriété sur un défilement. Ici, c'est l'angle de rotation d'une image qui est associé au défilement d'un élément. Cela se traduit par un indicateur en forme d'un compteur de vitesse.
Cet indicateur est composé de deux images : la graduation, qui est fixe, et l'aiguille du compteur, dont l'angle de rotation est associé au défilement de l'élément
autrement dit à la position de la barre de défilement verticale.
Ces deux images sont positionnée en stiky pour ne pas défiler avec le reste du contenu.
Les différents éléments constituant cet exemple sont identifiés de la façon suivante :
container : le conteneur avec défilement.graduation : l'image représentant la graduation.indicator : l'image représentant l'aiguille.content : l'élément contenant le texte.Attention ! Ce code ne fonctionne pas sur certains navigateur, comme Firefox par exemple.
overflow-y:scroll;)@keyframes et aux quelques
propriétés ci-dessous. Mais le CSS complet comporte de nombreuses autres règles pour dimensionner et positionner les éléments de cet exemple.
#indicator {
transform-origin:5px 32px;
animation:rotation;
animation-timeline:
scroll(block nearest);
}
L'exemple ci-dessous est construit avec view() : il affiche sur fond orange un partie du texte. L'animation se déroule lorsque cette partie est visible.
animation-timeline.Étant elle-même une propriété définissant les animations, animation-timeline ne peut pas être animée.
animation-timeline par programme.Les modifications de la propriété animation-timeline sont prises en compte immédiatement. Si l'animation n'est pas encore démarrée, l'effet de
la modification sera visible au prochain démarrage. Si l'animation est déjà en cours, la modification de animation-timeline provoque généralement
un saut dans la progression de l'animation.
animation-timeline en Javascript.En Javascript, voici comment modifier la valeur de animation-timeline.
On voit que Javascript propose une syntaxe avec la notation kebab-case classique en CSS (un tiret pour séparer les mots),
et une autre syntaxe avec la notation camel-case (une majuscule pour séparer les mots).
let el = document.getElementById('id');
el.style['animation-timeline'] = 'scroll(block self)';
// ou
let el = document.getElementById('id');
el.style.animationTimeline = 'scroll(block self)';
animation-timeline.Le code ci-dessous renvoie la valeur de animation-timeline lorsque celle-ci a été affectée via l'attribut style du HTML.
La valeur affectée dans la feuille de styles, via un sélecteur CSS, n'est pas prise en compte.
let el = document.getElementById('id');
let value = el.style['animation-timeline'];
// ou
let el = document.getElementById('id');
let value = el.style.animationTimeline;
animation-timeline en Javascript.La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages : ce sera en priorité la valeur éventuellement affectée via l'attribut
style du HTML, puis la valeur affectée via un sélecteur CSS (après résolution des contradictions en fonction des priorités des sélecteur),
une valeur héritée, ou enfin la valeur initiale de animation-timeline.
Dans le cas de animation-timeline, la valeur est renvoyée en secondes, quelque soit l'unité utilisée pour la définir.
Si plusieurs animations sont associées à l'élément, les différentes valeurs de animation-timeline sont renvoyées séparées par des virgules.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('animation-timeline');
animation-timeline avec JQuery.
$('#id').css('animation-timeline', 'scroll(block self)');
// ou
$('#id').css('animationTimeline', 'scroll(block self)');
animation-timeline avec JQuery.Comme en Javascript, la ou les valeurs de animation-timeline sont retournées en secondes.
let value = $('#id').css('animation-timeline');
Les deux boutons ci-dessous appliquent une valeur à la propriété animation-timeline. Ils relisent ensuite, soit la valeur affectée pour le premier bouton,
soit la valeur calculée pour le deuxième. Ce deuxième bouton vous permet de visualiser comment sont mémorisées les différentes valeurs pour la propriété.
Si votre navigateur ne reconnaît pas les animations pilotées par un défilement, la valeur calculée sera vide.
animation-timeline.L'élément ci-dessous est défini comme un container avec défilement. Utilisez l'ascenseur pour activer l'animation : changement de la couleur du fond.
animation-timeline.Sur Firefox 
, les fonctionnalités de la propriété animation-timeline sont désactivées par défaut. Elle peuvent être activées en fixant à true
l'option layout.css.scroll-driven-animation.enabled (2024). Voir accéder aux flags sur Firefox.
animation-timeline. Sur Firefox cette fonctionnalité doit être activée.view() utilisée avec la propriété animation-timeline.scroll() utilisée avec la propriété animation-timeline.(1) Désactivé par défaut. Peut être activé en positionnant le flag layout.css.scroll-driven-animations.enabled à true.
animation-timelineview()scroll()
animation-timeline.
animation-timeline.
Toutes les définitions concernant les animations en CSS sont regroupées dans la spécification "Module CSS - Animations" (voir CSS Animations).
La propriété animation-timeline, ainsi que les suivantes, figurent donc dans cette spécification.
Les animations pilotées par un défilement (Scroll-driven Animations) sont quant à elles décrites dans un module de spécification à part : Scroll-driven Animations.