-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
158 lines (113 loc) · 6.27 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
---
title: "@scroll-timeline"
slug: Web/CSS/scroll-timeline
l10n:
sourceCommit: 3db79652f43f0d5b4bd3bc0f233ed7670d91cbdf
---
{{CSSRef}}{{SeeCompatTable}}
La [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) [CSS](/fr/docs/Web/CSS) **`scroll-timeline`** définit un nom qui peut être utilisé pour identifier l'élément source d'une chronologie de défilement, ainsi que l'axe de défilement qui fournit la chronologie.
Le nom ainsi déclaré peut être utilisé dans une déclaration [`animation-timeline`](/fr/docs/Web/CSS/animation-timeline) afin d'indiquer l'élément (et donc la barre de défilement) utilisé pour contrôler l'avancement de l'animation. On notera que si l'élément n'affiche pas de barre de défilement dans l'axe indiqué, aucune chronologie ne sera créée.
La propriété `scroll-timeline` est équivalente à l'utilisation des propriétés [`scroll-timeline-name`](/fr/docs/Web/CSS/scroll-timeline-name) et [`scroll-timeline-axis`](/fr/docs/Web/CSS/scroll-timeline-axis) dans une seule déclaration.
## Propriétés détaillées correspondantes
Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :
- [`scroll-timeline-name`](/fr/docs/Web/CSS/scroll-timeline-name)
- [`scroll-timeline-axis`](/fr/docs/Web/CSS/scroll-timeline-axis)
## Syntaxe
```css
/* Valeur pour scroll-timeline-name et scroll-timeline-axis */
scroll-timeline: nom_specifique_pour_chronologie block;
scroll-timeline: nom_specifique_pour_chronologie inline;
scroll-timeline: nom_specifique_pour_chronologie vertical;
scroll-timeline: nom_specifique_pour_chronologie horizontal;
/* Mot-clé none pour scroll-timeline-name et valeur pour scroll-timeline-axis */
scroll-timeline: none block;
scroll-timeline: none inline;
scroll-timeline: none vertical;
scroll-timeline: none horizontal;
/* scroll-timeline-name ou scroll-timeline-axis */
scroll-timeline: none;
scroll-timeline: nom_specifique_pour_chronologie;
scroll-timeline: block;
scroll-timeline: inline;
scroll-timeline: vertical;
scroll-timeline: horizontal;
```
### Valeurs
Une valeur `<scroll-timeline-name>` suivie d'une valeur `<scroll-timeline-axis>` peut être appliquée à l'élément conteneur dans n'importe quel ordre. Au moins une des deux valeurs doit être fournie.
Les valeurs autorisées pour `<scroll-timeline-name>` sont :
- `none`
- : La chronologie n'a pas de nom associé.
- `<custom-ident>`
- : Un identifiant personnalisé qui peut être utilisé pour faire référence à la chronologie de défilement dans une déclaration [`animation-timeline`](/fr/docs/Web/CSS/animation-timeline). Les valeurs possibles sont décrites sur la page du type [`<custom-ident>`](/fr/docs/Web/CSS/custom-ident).
La valeur `<scroll-timeline-axis>` indique la barre de défilement de l'axe donné, pour l'élément identifié par `<scroll-timeline-name>`, qui fournit la chronologie de défilement. Les valeurs autorisées sont :
- `block`
- : La valeur par défaut. C'est la barre de défilement sur l'axe de bloc qui contrôle la chronologie. L'axe de bloc correspond à la direction orthogonale au flux du texte sur une ligne. Pour les modes d'écritures horizontaux (comme le français ou l'anglais), cette valeur se comporte comme `vertical`, et pour les modes d'écritures verticaux, cette valeur se comporte comme `horizontal`.
- `inline`
- : C'est la barre de défilement sur l'axe en ligne qui contrôle la chronologie. L'axe en ligne correspond à la direction parallèle au flux du texte sur une ligne. Pour les modes d'écritures horizontaux, cette valeur se comporte comme `horizontal`, et pour les modes d'écritures verticaux, cette valeur se comporte comme `vertical`.
- `vertical`
- : C'est la barre de défilement sur l'axe vertical qui contrôle la chronologie.
- `horizontal`
- : C'est la barre de défilement sur l'axe horizontal qui contrôle la chronologie.
## Définition formelle
{{cssinfo}}
## Syntaxe formelle
{{csssyntax}}
## Exemples
Dans cet exemple, on définit une chronologie de défilement intitulée `squareTimeline` grâce à la propriété `scroll-timeline-name` sur l'élément avec l'identifiant `container`. Celle-ci est ensuite appliquée à l'animation de l'élément `#square` en utilisant `animation-timeline: squareTimeline`.
### HTML
Voici le fragment HTML utilisé pour l'exemple.
```html
<div id="container">
<div id="square"></div>
<div id="stretcher"></div>
</div>
```
### CSS
Quant au CSS, on définit le conteneur comme source d'une chronologie de défilement intitulée `squareTimeline` à l'aide de la propriété `scroll-timeline`. On définit également que la barre de défilement pour la chronologie est la barre verticale (avec `vertical`) (c'est le comportement qui aurait été utilisé par défaut).
La hauteur du conteneur est fixée à `300px` et on force la création d'une barre de défilement verticale en cas de défilement (nous allons utiliser l'élément avec l'identifiant `stretcher` pour forcer ce dépassement).
```css
#container {
height: 300px;
overflow-y: scroll;
scroll-timeline: squareTimeline vertical;
position: relative;
}
```
Le CSS qui suit définit un carré qui tourne dans des directions alternées, selon la chronologie fournie par la propriété `animation-timeline`, qui est fixée avec la valeur `squareTimeline` déclarée ci-avant.
```css
#square {
background-color: deeppink;
width: 100px;
height: 100px;
margin-top: 100px;
animation-name: rotateAnimation;
animation-duration: 3s;
animation-direction: alternate;
animation-timeline: squareTimeline;
position: absolute;
bottom: 0;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
```
Enfin, on définit la hauteur de l'élément d'identifiant `stretcher` afin de forcer le dépassement dans le conteneur et pour créer les barres de défilement. Sans cet élément, il n'y aurait pas de barre de défilement et pas de chronologie de défilement à associer avec l'animation.
```css
#stretcher {
height: 600px;
}
```
### Résultat
Faites défiler la barre verticale afin d'observer l'animation.
{{EmbedLiveSample("", "100%", "320px")}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- [`animation-timeline`](/fr/docs/Web/CSS/animation-timeline)