CSS permet l'animation d'éléments HTML sans utiliser JavaScript ou Flash !
Dans ce chapitre, vous découvrirez les propriétés suivantes :
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimationLes nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge la propriété.
| Property | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
Une animation permet à un élément de passer progressivement d'un style à un autre.
Vous pouvez modifier autant de propriétés CSS que vous le souhaitez, autant de fois que vous le souhaitez.
Pour utiliser l'animation CSS, vous devez d'abord spécifier des images clés pour le animation.
Les images clés contiennent les styles que l'élément aura à certains moments.
Lorsque vous spécifiez des styles CSS dans les @keyframes règle générale, l'animation passera progressivement du style actuel au nouveau style à certains moments.
Pour faire fonctionner une animation, vous devez lier l'animation à un élément.
L'exemple suivant lie l'animation « exemple » à l'élément <div>. L'animation durera 4 secondes et changera progressivement le couleur d'arrière-plan de l'élément <div> de "rouge" à "jaune" :
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red; animation-name: example;
animation-duration: 4s;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
</body>
</html>
Remarque : La propriété animation-duration définit combien de temps une animation doit prendre pour se terminer. Si la propriété animation-duration n'est pas spécifiée, aucune animation ne se produira, car la valeur par défaut est 0s (0 seconde).
Dans l'exemple ci-dessus, nous avons spécifié quand le style changera en utilisant les mots-clés "from" et "to" (qui représentent 0% (début) et 100% (terminé)).
Il est également possible d'utiliser un pourcentage. En utilisant le pourcentage, vous pouvez en ajouter autant le style change à votre guise.
L'exemple suivant changera la couleur d'arrière-plan du <div> élément lorsque l'animation est terminée à 25 %, terminée à 50 %, et encore lorsque l'animation est terminée à 100 % :
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
</body>
</html>
L'exemple suivant modifiera à la fois la couleur d'arrière-plan et la position du <div> élément lorsque l'animation est terminée à 25 %, terminée à 50 %, et encore lorsque l'animation est terminée à 100 % :
/* The animation code */
@keyframes example
{
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
</body>
</html>
La propriété animation-delay spécifie un délai pour le début d'une animation.
L'exemple suivant présente un délai de 2 secondes avant le démarrage de l'animation :
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:</p>
<div></div>
</body>
</html>
Les valeurs négatives sont également autorisées. Si vous utilisez des valeurs négatives, l'animation démarrera comme si la lecture avait déjà duré N secondes.
Dans l'exemple suivant, l'animation démarrera comme si elle avait déjà été jouer pendant 2 secondes :
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>Using negative values in the animation-delay property: Here, the animation will start as if it had already been playing for 2 seconds:</p>
<div></div>
</body>
</html>
La propriété animation-iteration-count spécifie le nombre de fois qu'une animation doit s'exécuter.
L'exemple suivant exécutera l'animation 3 fois avant qu'elle ne s'arrête :
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation 3 times before it stops:</p>
<div></div>
</body>
</html>
L'exemple suivant utilise la valeur "infini" pour créer l'animation continue pour toujours :
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-iteration-count property can be set to infinite to let the animation run for ever:</p>
<div></div>
</body>
</html>
La propriété animation-direction spécifie si une animation doit être jouée en avant, en arrière ou en alternance cycles.
La propriété animation-direction peut avoir les valeurs suivantes :
normal- L'animation est jouée normalement (avants). C'est par défaut
reverse- L'animation est jouée en sens inverse (en arrière)
alternate- L'animation est jouée d'abord en avant, puis en arrière
alternate-reverse- L'animation est jouée d'abord à l'envers, puis en avant
L'exemple suivant exécutera l'animation dans le sens inverse (en arrière) :
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example will run the animation in reverse direction (backwards):</p>
<div></div>
</body>
</html>
L'exemple suivant utilise la valeur "alternate" pour créer l'animation courir d'abord en avant, puis en arrière :
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate" to make the animation run forwards first, then backwards:</p>
<div></div>
</body>
</html>
L'exemple suivant utilise la valeur "alternate-reverse" pour créer l'animation courir d'abord en arrière, puis en avant :
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate-reverse;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards:</p>
<div></div>
</body>
</html>
La propriété animation-timing-function spécifie la courbe de vitesse du animation.
La propriété animation-timing-function peut avoir les valeurs suivantes :
ease- Spécifie une animation avec un démarrage lent, puis rapide, puis une fin lente (c'est la valeur par défaut)
linear- Spécifie une animation avec la même vitesse du début à la fin
ease-in- Spécifie une animation avec un démarrage lent
ease-out- Spécifie une animation avec une fin lente
ease-in-out- Spécifie une animation avec un début et une fin lents
cubic-bezier(n,n,n,n)- Vous permet de définir vos propres valeurs dans une fonction cubique-bézier
L'exemple suivant montre quelques-unes des différentes courbes de vitesse pouvant être utilisées :
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s;
animation-fill-mode: forwards;
}
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-timing-function property specifies the speed curve of the animation. The following example shows some of the different speed curves that can be used:</p>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>
Les animations CSS n'affectent pas un élément avant la lecture de la première image clé ou après la lecture de la dernière image clé. La propriété animation-fill-mode peut remplacer ce comportement.
La propriété animation-fill-mode spécifie un style pour l'élément cible lorsque l'animation n'est pas en cours de lecture (avant qu'elle ne soit commence, après la fin, ou les deux).
La propriété animation-fill-mode peut avoir les valeurs suivantes :
none- Valeur par défaut. L'animation n'appliquera aucun style à l'élément avant ou après son exécution
forwards- L'élément conservera les valeurs de style définies par la dernière image clé (dépend de la direction de l'animation et du nombre d'itérations d'animation)
backwards- L'élément obtiendra les valeurs de style définies par la première image clé (dépend de la direction de l'animation) et les conservera pendant la période de retard de l'animation.
both- L'animation suivra les règles pour l'avant et l'arrière, étendant les propriétés de l'animation dans les deux sens
L'exemple suivant permet à l'élément <div> de conserver les valeurs de style du dernière image clé à la fin de l'animation :
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes example {
from {top: 0px;}
to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>Let the div element retain the style values set by the last keyframe when the animation ends:</p>
<div></div>
</body>
</html>
L'exemple suivant permet à l'élément <div> d'obtenir les valeurs de style définies par l'élément première image clé avant le début de l'animation (pendant la période de retard de l'animation) :
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
@keyframes example {
from {top: 0px; background-color: yellow;}
to {top: 200px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>Let the div element get the style values set by the first keyframe before the animation starts (during the animation-delay period):</p>
<div></div>
</body>
</html>
L'exemple suivant permet à l'élément <div> d'obtenir les valeurs de style définies par la première image clé avant le début de l'animation et conserver les valeurs de style à partir de la dernière image clé à la fin de l'animation :
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
@keyframes example {
from {top: 0px; background-color: yellow;}
to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>Let the div element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:</p>
<div></div>
</body>
</html>
L'exemple ci-dessous utilise six des propriétés d'animation :
div
{ animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
} Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>This example uses six of the animation properties:</p>
<div></div>
</body>
</html>
Le même effet d'animation que ci-dessus peut être obtenu en utilisant le raccourci Propriété animation :
div
{
animation: example 5s linear 2s infinite alternate;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>This example uses the shorthand animation property:</p>
<div></div>
</body>
</html>
Le tableau suivant répertorie la règle @keyframes et toutes les propriétés d'animation CSS :
Spécifie le code d'animation
Une propriété raccourcie pour définir toutes les propriétés d'animation
Spécifie un délai pour le début d'une animation
Spécifie si une animation doit être jouée en avant, en arrière ou en cycles alternés
Spécifie combien de temps une animation doit prendre pour terminer un cycle
Spécifie un style pour l'élément lorsque l'animation n'est pas en cours de lecture (avant le début, après la fin ou les deux)
Spécifie le nombre de fois qu'une animation doit être jouée
Spécifie le nom de l'animation @keyframes
Spécifie si l'animation est en cours d'exécution ou en pause
Spécifie la courbe de vitesse de l'animation