timeline-scope
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
La propriété CSS timeline-scope modifie la portée d'une chronologie d'animation nommée.
Syntaxe
/* Valeurs par mot-clé */
timeline-scope: all;
timeline-scope: none;
/* Valeurs personnalisées */
timeline-scope: --nom_de_chronologie_personnalisee;
timeline-scope: --nom_de_chronologie_un, --nom_de_chronologie_deux;
/* Valeurs globales */
timeline-scope: inherit;
timeline-scope: initial;
timeline-scope: revert;
timeline-scope: revert-layer;
timeline-scope: unset;
Valeurs
Les valeurs autorisées pour timeline-scope sont :
none-
Il n'y a aucun changement dans la portée de la chronologie. C'est la valeur par défaut.
all-
Les noms de toutes les chronologies définies par les descendants sont dans la portée de cet élément et de ses descendants.
<dashed-ident>-
Définit le nom d'une chronologie nommée existante (c'est-à-dire déclarée en utilisant
scroll-timeline-nameouview-timeline-name) définie sur un élément descendant. Cela augmente la portée de la chronologie à l'élément actuel et à tous ses descendants.
Description
La propriété timeline-scope modifie la portée d'une chronologie d'animation nommée. Par défaut, une chronologie nommée (c'est-à-dire déclarée en utilisant scroll-timeline-name ou view-timeline-name) ne peut être définie que comme chronologie de contrôle d'un élément descendant direct (c'est-à-dire en définissant animation-timeline dessus avec le nom de la chronologie comme valeur). C'est la « portée » par défaut de la chronologie.
La valeur de timeline-scope est le nom d'une chronologie définie sur un élément descendant ; cela modifie la portée de la chronologie pour inclure l'élément ciblé et ses descendants. En d'autres termes, l'élément sur lequel la propriété timeline-scope est définie, ainsi que tous ses éléments descendants, peuvent être contrôlés en utilisant cette chronologie.
Si aucune chronologie (ou plus d'une chronologie) n'existe avec le nom donné pour la valeur timeline-scope, une chronologie inactive avec le nom défini est créée. La propriété timeline-scope ne fonctionne qu'avec des chronologies nommées et ne peut donc pas être utilisée en conjonction avec des chronologies anonymes créées à l'aide des fonctions de chronologie d'animation view() ou scroll().
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | none ou une liste ordonnée d'identifiants |
| Type d'animation | Non animable |
Syntaxe formelle
timeline-scope =
none |
all |
<dashed-ident>#
Exemples
Dans cet exemple, nous animons un élément en réponse au défilement d'un autre élément en augmentant la portée de la chronologie avec la propriété timeline-scope.
HTML
Le HTML inclut un élément à animer et un élément à faire défiler :
<div class="content">
<div class="box animation"></div>
</div>
<div class="scroller">
<div class="long-element"></div>
</div>
CSS
Une chronologie de défilement nommée --mon-element-defilant est définie en utilisant la propriété scroll-timeline-name sur un élément défilant. Ce nom de chronologie de défilement est utilisé à deux autres endroits : il est appliqué comme animation-timeline sur l'élément que nous voulons animer, et comme timeline-scope sur un ancêtre à la fois du défileur et de l'élément animé, augmentant ainsi la portée.
Nous définissons la hauteur du <body> à 100vh et disposons ses deux éléments enfants en deux colonnes égales en utilisant flexbox. Pour augmenter la portée de la chronologie depuis l'élément <div class="scroller"> jusqu'à l'ensemble du <body>, nous définissons timeline-scope: --mon-element-defilant dessus. Ce faisant, la chronologie --mon-element-defilant peut être définie comme la chronologie de contrôle pour une animation définie sur le <body> ou tout élément imbriqué à l'intérieur.
body {
margin: 0;
height: 100vh;
display: flex;
timeline-scope: --mon-element-defilant;
}
.content,
.scroller {
flex: 1;
}
Nous définissons --mon-element-defilant comme scroll-timeline-name sur l'élément défilant qui doit fournir la chronologie de progression du défilement pour notre élément animé. Nous ajoutons overflow pour activer le défilement, en ajoutant une couleur de fond pour rendre sa limite visible. Nous définissons une grande height sur le contenu de notre élément défilant afin que l'élément défile réellement.
.scroller {
overflow: scroll;
scroll-timeline-name: --mon-element-defilant;
background: deeppink;
}
.long-element {
height: 2000px;
}
Ensuite, nous donnons à l'élément animé quelques styles rudimentaires et lui appliquons une animation en utilisant la propriété abrégée animation. Nous définissons la animation-timeline sur la chronologie de défilement nommée : --mon-element-defilant. Pour réitérer, animer l'élément en fonction de la progression du défilement de son élément cousin n'est possible que parce que nous avons défini timeline-scope sur un ancêtre commun ; l'élément animé n'est pas un descendant de l'élément défilant.
.box {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: rebeccapurple;
}
.animation {
animation: rotate-appear 1ms linear;
animation-timeline: --mon-element-defilant;
}
@keyframes rotate-appear {
from {
rotate: 0deg;
translate: 0;
}
to {
rotate: 720deg;
translate: 100%;
}
}
Résultat
Faites défiler la barre verticale dans la zone rose pour voir le carré s'animer.
Le point clé à noter ici est que l'élément animé n'est pas un descendant de l'élément défilant — pour que cela fonctionne, nous augmentons la portée de la chronologie --mon-element-defilant en définissant timeline-scope: --mon-element-defilant sur le <body>.
Spécifications
| Spécification |
|---|
| Scroll-driven Animations # propdef-timeline-scope |
Compatibilité des navigateurs
Voir aussi
- La propriété
animation-timeline - Les propriétés
scroll-timeline,scroll-timeline-name - Les propriétés
view-timeline,view-timeline-name - Les animations pilotées par le défilement CSS