animation-timeline
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
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
/* 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 initiale | auto |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | a list, each item either a case-sensitive CSS identifier or the keywords none, auto |
| Type d'animation | Not 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
<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);
}
}
Résultat
Faites défiler le cadre pour observer l'animation.
Spécifications
| Specification |
|---|
| CSS Animations Level 2 # animation-timeline |
Compatibilité des navigateurs
Chargement…