Animation-range - Propriété CSS

Schéma de la syntaxe de animation-range.

Description des termes utilisés sur le schéma :

• length / % est une valeur numérique suivie d'une des unités de dimension, ou un pourcentage calculé par rapport à la dimension du cadre défilant.
• name : est un identifiant défini par l'utilisateur.
• Plusieurs valeurs peuvent être définies en les séparant par des virgules.

Description des propriétés animation-range-start, animation-range-end et animation-range.

La propriété animation-range est une propriété résumée pour animation-range-start et animation-range-end. Ces trois propriétés interviennent dans le cas d'une animation pilotée par un défilement. Elles définissent la portion du défilement qui sera utilisée pour piloter l'animation.

Voila à quoi ressemble une animation pilotée par le défilement. Cela ne fonctionne pas sur Firefox   (2024) :

Autres propriétés à connaître.

Voici quelques unes des propriétés et fonctions nécessaires pour la mise en œuvre des animations pilotées par un défilement.

Valeurs pour animation-range-start et animation-range-end.

Dans les exemples ci-dessous, la couleur du bloc interne est sensé changer au gré du défilement. Mais les exemples ne fonctionnent pas avec Firefox   (2025).

• animation-range-start: normal; animation-range-end: normal; animation-range: normal normal;

  Avec ces valeurs, qui sont les valeurs initiales, le défilement est entièrement pris en compte pour piloter l'animation.
• animation-range-start: 40%; animation-range-end: 60%; animation-range: 40% 60%;

  Les valeurs doivent être suivis d'une des unités de dimension, ou être des pourcentages, tous deux évalués par rapport au début de la course.
  La portion du défilement prise en compte pour piloter les animations est définit entre ces deux valeurs.

  Si la valeur de départ est supérieure à la valeur de fin, l'animation ne sera jamais déclenchée.
  Si la valeur de départ est négative, le début de l'animation n'est pas joué.
  Si la valeur max est supérieur à 100%, la fin de l'animation ne sera jamais jouée.

  Pendant l'animation, le rectangle passe du noir au gris ; lorsque l'animation et en attente, le rectangle est bleu ciel.

  animation-range:40% 60%;

  
  Néanmoins, la propriété animation-fill-mode influence sur la couleur du rectangle en dehors de la zone d'animation :

  • none : la couleur est déterminée par la propriété background-color.
  • backwards : avant que l'animation ne démarre, la couleur est celle du début de l'animation.
  • forwards : lorsque l'animation est terminée, la couleur est celle de la fin de l'animation.
  • both : avant le début de l'animation, la couleur est celle du début de l'animation, et lorsque celle-ci est terminée, la couleur est celle de la fin de l'animation.
  animation-range:40% 60%;
animation-fill-mode:backwards;

  animation-range:40% 60%;
animation-fill-mode:forwards;
• animation-range-start: entry 20%; ⚠ animation-range-end: exit 80%; ⚠ animation-range: entry 20% exit 80%; ⚠

  Les deux identifiants entry et exit sont deux noms définis par l'utilisateur. Ils s'identifient aux valeurs 20% et 80%. Ces noms peuvent ensuite être utilisés dans une syntaxe avec animation-timeline.

• animation-range-start: 20%, 25%; animation-range-end: 80%, 90%; animation-range: 20% 80%, 25% 90%;

  Plusieurs valeurs peuvent être indiquées, en les séparant par des virgules. Cette syntaxe est utile lorsque plusieurs animations sont définies sur l'élément.

• animation-range: initial; animation-range: inherit; animation-range: revert; animation-range: revertLayer; animation-range: unset;

  animation-range-start: initial; (normal) animation-range-start: inherit; animation-range-start: revert; animation-range-start: revertLayer; animation-range-start: unset;

  animation-range-end: initial; (normal) animation-range-end: inherit; animation-range-end: revert; animation-range-end: revertLayer; animation-range-end: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Animation de ces propriétés.

Les propriétés animation-range-start et animation-range-end ne peuvent pas être animées, comme toutes les autres propriétés qui servent à définir les animations. Il en est bien sûr de même pour la propriété résumée animation-range.

Accéder à la propriété animation-range par programme.

Avec Javascript, modifier la valeur de animation-range.

En Javascript, voici comment modifier la valeur de animation-range. On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['animation-range'] = '20% 50%'; // ou let el = document.getElementById('id'); el.style.animationRange = '20% 50%';

Avec Javascript, lire la valeur de animation-range.

La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['animation-range']; // ou let el = document.getElementById('id'); let value = el.style.animationRange;

Avec Javascript, lire la valeur calculée de animation-range.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives et de la prise en compte éventuelle des valeurs héritées. La valeur calculée est toujours définie.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('animation-range');

Avec JQuery, modifier la valeur de animation-range.


$('#id').css('animation-range', '20% 50%');
// ou
$('#id').css('animationRange', '20% 50%');


Avec Javascript, lire la valeur de animation-range.

let value = $('#id').css('animation-range');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page sur les Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété animation-range et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de animation-range. On constate en particulier que les pourcentages sont bien mémorisés en tant que pourcentages (voir le chapitre sur l'héritage), mais toutes les autres unités sont converties en pixels.

⚠ Sur Firefox   les valeurs ne sont pas mémorisées.

Exemple interactif avec la propriété animation-range.

La barre de défilement fait tourner le carré et change sa couleur. En ajustant la valeur de Animation-range-start et animation-range-end, vous régler la portion de défilement prise en compte pour faire tourner le carré.
La propriété animation-fill-mode a été fixée sur both, ce qui maintient les états extrêmes du carré.

Compatibilité des navigateurs avec animation-range.

1

Propriété
animation-range

Estimation de la prise en charge globale.

73%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété animation-range.

Les deux propriétés animation-range-start et animation-range-end ont le même historique que la propriété résumée animation-range.

• Animations pilotées par un défilement - Niveau 1

  Introduction des animations pilotées par un défilement (Scroll Animation) et de la propriété animation-range.
  

  25 Octobre 2022

  Document de travail.

  

  

  

Voir aussi, à propos des animations pilotées par un défilement.

Toutes les définitions concernant les animations en CSS sont regroupées dans la spécification "Animations pilotées par un défilement" (voir Scroll-driven Animations). La propriété animation-range, ainsi que les suivantes, figurent donc dans cette spécification.

Propriétés :

Fonctions :