-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
120 lines (88 loc) · 2.99 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
---
title: animation-timeline
slug: Web/CSS/animation-timeline
l10n:
sourceCommit: 9f958fd33582b47bd3e365c64eb2cdd9cee8f527
---
{{CSSRef}}
La propriété [CSS](/fr/docs/Web/CSS) **`animation-timeline`** indique le nom d'une ou plusieurs règles @ [`@scroll-timeline`](/fr/docs/Web/CSS/@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`](/fr/docs/Web/CSS/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`)](/fr/docs/Web/API/DocumentTimeline).
- `none`
- : L'animation n'est associée à aucune chronologie.
- `<timeline-name>`
- : Un [identifiant (`custom-ident`)](/fr/docs/Web/CSS/custom-ident) ou une chaîne de caractères identifiant la chronologie de défilement, déclarée via une règle [`@scroll-timeline`](/fr/docs/Web/CSS/@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
{{cssinfo}}
## Syntaxe formelle
{{csssyntax}}
## 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.
{{EmbedLiveSample("")}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- [Utiliser les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
- [La règle @ `@scroll-timeline`](/fr/docs/Web/CSS/@scroll-timeline)