Propriété CSS animation
La propriété animation est utilisée pour animer (changer graduellement d'un style à l'autre) les propriétés CSS avec les valeurs discrètes : propriétés de mise en page (border, height, width, etc) propriétés qui définissent la position (left, top), tailles de fonte, couleurs et opacités.
La règle @keyframes
Pour utiliser une animation, vous devez premièrement spécifier ce qui doit occurer aux moments spécifiques pendant l'animation. Cela est défini à l'aide de la règle @keyframes.
La règle @keyframes est composée d'un mot-clé “@keyframes” suivi par animation-name, qui identifie l'animation. L'animation est puis appliquée à un élément en utilisat cet identificateur comme une valeur pour la propriété animation-name.
Dans les accolades on met des sélecteurs keyframe, qui définissent des keyframes (ou points de repère) dans la séquence de l'animation lorsque les styles doivent être changés. Le sélecteur keyframe peut commencer avec un pourcentage (%) ou avec les mots-clés “from” (même que 0%) et “to” (même que 100%). 0% est un point de départ de l'animation, 100% est le point de la fin.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
.element {
padding: 50px;
animation: pulse 4s infinite;
}
@keyframes pulse {
0% { background-color: #8ebf42; }
50% { background-color: #1c87c9; }
100% { background-color: #d5dce8; }
}
</style>
</head>
<body>
<div class="element">L'arrière-plan de ce texte est animé en utilisant la propriété CSS3 animation.</div>
</body>
</html>Dans cet exemple, nous avons lié l'animation à l'élément <div>. L'animationn va durer 4 secondes, et elle va graduellement changer la couleur de l'arrière-plan de l'élément <div> de "green" à "grey".
Propriétés liées à l'animation
L’animation est une propriété raccourcie utilisée pour définir toutes les propriétés d’animation dans une seule déclaration. Nous énumérons ci-dessous toutes les propriétés standard liées à l'animation.
Animation-name
La propriété animation-name définit le nom de la règle @keyframes que vous voulez utiliser.
animation-name: keyframe-name | none | initial | inheritAnimation-duration
La propriété animation-duration définit la durée (en secondes ou en millisecondes) d'une animation pour terminer un cycle d'animation.
animation-duration: time | initial | inheritAnimation-timing-function
La propriété animation-timing-function définit la progression de l'animation sur la durée de chaque cycle.
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inheritElle peut assumer les valeurs suivantes:
- ease — (par défaut) l’animation commence lentement, puis devient plus rapide et se termine lentement.
- ease-in — l’animation a un début lent, mais s’accélère à la fin et s'arrête brusquement.
- ease-out — l'animation a un début rapide, mais se termine lentement.
- ease-in-out — l'animation commence et se termine lentement.
- linear — l'animation a la même vitesse tout au long de l'animation; souvent mieux utilisé pour les changements de couleur ou d'opacité.
- cubic-bezier (n,n,n,n) - Permet de définir vos propres valeur de 0 à 1.
Animation-delay
La propriété animation-delay définit le temps (en secondes ou milisecondes) entre le chargement et le début de l'animation.
animation-delay: time | initial | inheritAnimation-direction
La propriété animation-direction définit si l'animation doit être lue à l'envers sur des cycles alternés ou non.
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inheritLes valeurs suivantes peuvent s'appliquer à:
- normal — (par défaut) l’animation est jouée du début à la fin (keyframes 0% - 100%)
- reverse — l’animation est jouée de la fin au début avec l’envers, puis revient brusquement à l’état d’origine (keyframes (100% - 0%)
- alternate — l’animation est jouée du début à la fin, puis elle revient avec aisance à son état d’origine, qui ressemble rembobiner.
- alternate-reverse — l’animation est jouée de la fin au début, puis revient avec aisance à l’état d’origine.
Animation-iteration-count
La propriété animation-iteration-countéfinit le nombre de fois qu'un cycle d'animation doit être joué avant de s'arrêter. La valeur par défaut est 1, mais toute valeur entière positive peut être définie. Si vous définissez le mot clé infinite, l'animation sera jouée indéfiniment.
animation-iteration-count: number | infinite | initial | inheritAnimation-fill-mode
La propriété animation-fill-mode spécifie un style pour l'élément appliqué avant ou après l'exécution de l'animation.
animation-fill-mode: none | forwards | backwards | both | initial | inheritElle peut assumer les valeurs suivantes:
- forwards - indique, que l’élément doit conserver les valeurs de style définies par la dernière keyframe (dépend des propriétés animation-iteration-count et animation-direction).
- backwards - spécifie que l'élément doit obtenir les valeurs de style définies par la première keyframe (dépend de la direction de l'animation) et le conserver dans la période de délai d'animation.
- both - Indique, que l’animation doit suivre les règles de les deux valeurs: forwards et backwards.
- none - (par défaut) indique, qu’aucun style ne sera appliqué à l’élément avant et après de l’animation.
Animation-play-state
La propriété animation-play-state indique, si l’animation doit être en lecture ou en pause.
animation-play-state: paused | running | initial | inheritLa valeur initiale est "running".
Maintenant voyons les propriétés liées à l'animation en fonctionnement.
Exemple
@keyframes pulse {
/* déclarer les actions de l'animation ici */
}
.element {
animation-name: pulse;
animation-duration: 3.5s;
animation-timing-function: ease-in;
animation-delay: 1s ;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
/*
Le même peut être déclaré en utilisant la propriété raccourcie animation
*/
.element {
animation:
pulse
3.5s
ease-in
1s
alternate
infinite
none
running;
}Animations multiples
Dans un sélecteur plusieurs , on peut déclarer des animations multiples. Vous devez juste séparer les valeurs par virgules.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.element {
height: 200px;
width: 200px;
background-color: #1c87c9;
animation: pulse 5s ease infinite alternate,
nudge 5s linear infinite alternate;
}
@keyframes pulse {
0%, 100% { background-color: #8ebf42; }
50% { background-color: #1c87c9; }
}
@keyframes nudge {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(150px, 0); }
80% { transform: translate(-150px, 0); }
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>Support de Navigateurs
|
|
|
|
|---|---|---|---|
|
43.0+ 4.0-42.0 -webkit- |
16.0+ 5.0-15.0 -moz- |
9.0+ 5.1-8.0 -webkit- |
12.0+ 15.0-29.0 -webkit- |
Pratiquez vos connaissances
