-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
132 lines (100 loc) · 3.95 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
---
title: animation-fill-mode
slug: Web/CSS/animation-fill-mode
---
{{CSSRef}}
La propriété **`animation-fill-mode`** indique la façon dont une animation CSS doit appliquer les styles à sa cible avant et après son exécution.
{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}
## Syntaxe
```css
/* Valeurs avec un mot-clé */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/* Gestion de plusieurs animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
```
### Valeurs
- `none`
- : L'animation n'appliquera aucun style à la cible, avant et après l'exécution. Le style utilisé sera celui défini par les autres règles CSS.
- `forwards`
- : La cible retiendra les valeurs calculées définies lors de la dernière étape (_keyframe_). La dernière étape considérée dépend de la valeur de {{cssxref("animation-direction")}} et de {{cssxref("animation-iteration-count")}} :
| `animation-direction` | `animation-iteration-count` | dernière _keyframe_ |
| --------------------- | --------------------------- | ------------------- |
| `normal` | pair ou impair | `100%` ou `to` |
| `reverse` | pair ou impair | `0%` ou `from` |
| `alternate` | pair | `0%` ou `from` |
| `alternate` | impair | `100%` ou `to` |
| `alternate-reverse` | pair | `100%` ou `to` |
| `alternate-reverse` | impair | `0%` ou `from` |
- `backwards`
- : L'animation appliquera les valeur définies par la première _keyframe_ pertinente et les retiendra pendant la durée indiquée par {{cssxref("animation-delay")}}. La première _keyframe_ pertinente dépend de la valeur de {{cssxref("animation-direction")}} :
| `animation-direction` | première _keyframe_ |
| -------------------------------- | ------------------- |
| `normal` ou `alternate` | `0%` ou `from` |
| `reverse` ou `alternate-reverse` | `100%` ou `to` |
- `both`
- : L'animation respectera les règles qui s'appliquent à `forwards` et `backwards`, entraînant ainsi l'extension des propriétés de l'animation dans les deux directions.
> **Note :** Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
## Définition formelle
{{CSSInfo}}
## Syntaxe formelle
{{CSSSyntax}}
## Exemples
### CSS
```css
.demo {
border-top: 100px solid #ccc;
height: 300px;
font-family: sans-serif;
}
@keyframes grow {
0% {
font-size: 0;
}
100% {
font-size: 40px;
}
}
@-webkit-keyframes grow {
0% {
font-size: 0;
}
100% {
font-size: 40px;
}
}
.demo:hover .grows {
animation-name: grow;
animation-duration: 3s;
-webkit-animation-name: grow;
-webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
animation-name: grow;
animation-duration: 3s;
animation-fill-mode: forwards;
-webkit-animation-name: grow;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
}
```
### HTML
```html
<p>Déplacez votre souris sur la boîte grise.</p>
<div class="demo">
<div class="growsandstays">La boîte grandit et s'arrête</div>
<div class="grows">La boîte grandit</div>
</div>
```
### Résultat
{{EmbedLiveSample('Exemples',700,300)}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS)
- {{domxref("AnimationEvent", "AnimationEvent")}}