6.1 La règle @keyframes
Les animations CSS te permettent de créer des effets visuels complexes et fluides avec un minimum d'effort. L'outil principal pour créer des animations en CSS est la règle @keyframes, qui définit les images clés de l'animation et les changements de styles qui doivent se produire à chaque image.
La règle @keyframes est utilisée pour créer une animation en définissant les changements de propriétés CSS à différentes étapes de l'animation. Les images clés définissent quels styles seront appliqués à certains moments pendant l'animation.
Syntaxe 1 :
@keyframes animation-name {
from {
/* styles de départ */
}
to {
/* styles finaux */
}
}
Syntaxe 2 :
@keyframes animation-name {
0% {
/* styles de départ */
}
100% {
/* styles finaux */
}
}
Où :
fromcorrespond à0%du temps de l'animationtocorrespond à100%du temps de l'animation
Exemple : Changement progressif de la couleur d'arrière-plan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Animation Example</title>
<style>
@keyframes changeColor {
from {
background-color: lightblue;
}
to {
background-color: lightcoral;
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: changeColor 3s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Hover over me!</div>
</body>
</html>
Explication :
- la règle
@keyframes changeColordéfinit une animation qui change la couleur de fond d'un élément delightblueàlightcoral - la propriété
animationsur l'élément.animated-boxindique que l'animationchangeColordoit durer 3 secondes et se répéter à l'infini
6.2 Plusieurs images clés
Tu peux utiliser plus de deux images clés pour créer des animations plus complexes en définissant des styles pour les états intermédiaires.
Exemple : Mouvement diagonal avec changement de couleur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Keyframes Example</title>
<style>
@keyframes moveAndChangeColor {
0% {
background-color: lightblue;
transform: translate(0, 0);
}
50% {
background-color: lightgreen;
transform: translate(100px, 100px);
}
100% {
background-color: lightcoral;
transform: translate(200px, 0);
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: moveAndChangeColor 5s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Watch me move!</div>
</body>
</html>
Explication :
La règle @keyframes moveAndChangeColor définit une animation qui change la couleur de fond et la position de l'élément en trois étapes.
- À 0% du temps de l'animation, l'élément a une couleur bleu clair et est à la position de départ
- À 50% du temps de l'animation, l'élément a une couleur vert clair et se déplace de 100 pixels à droite et en bas
- À 100% du temps de l'animation, l'élément a une couleur corail clair et se déplace de 200 pixels à droite
6.3 Exemples d'animations simples
Exemple 1 : Pulsation
Créer un effet de pulsation où un élément augmente et diminue en douceur.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsing Effect</title>
<style>
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulse-box {
width: 150px;
height: 150px;
background-color: lightpink;
animation: pulse 2s infinite;
}
</style>
</head>
<body>
<div class="pulse-box">Pulsing</div>
</body>
</html>
Explication :
- la règle
@keyframes pulsedéfinit une animation qui augmente la taille de l'élément jusqu'à 120% puis le ramène à sa taille d'origine - la propriété
animationsur l'élément.pulse-boxindique que l'animationpulsedoit durer 2 secondes et se répéter à l'infini
Exemple 2 : Rotation
Créer un effet de rotation continue de l'élément :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Effect</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-box {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: rotate 3s infinite linear;
}
</style>
</head>
<body>
<div class="rotate-box">Rotating</div>
</body>
</html>
Explication :
- la règle
@keyframes rotatedéfinit une animation qui tourne l'élément de 0 à 360 degrés - la propriété
animationsur l'élément.rotate-boxindique que l'animationrotatedoit durer 3 secondes, se répéter à l'infini et se dérouler à vitesse constante (linear)
GO TO FULL VERSION