Vous êtes ici : Accueil > Cours > CSS > Animations et transitions CSS
Les transitions et animations CSS c'est quoi ?
Auparavant, il fallait passer par JavaScript (même si c'est encore le cas dans beaucoup de situations et le sera sans doute avec les Web animations : WAAPI) pour animer des éléments dans un document HTML.
Avec l'arrivée des transitions et animations CSS, il est aisé de créer des effets visuels plus ou moins complexes.
Tandis qu'une transition CSS va permettre d’animer le changement de valeur d’une propriété de manière fluide, l'animation CSS, quant à elle, permet l'enchaînement de plusieurs transitions sur une propriété.
Par ailleurs, il faut savoir que la spécification n'est pas encore terminée (version de travail) aussi bien pour le module des transitions que celui des animations. Oubliez donc la compatibilité avec Internet Explorer (inférieur à 10).
Transitions CSS
Les propriétés de transition :
On peut appliquer à la propriété raccourcie transition les propriétés suivantes :
transition-delay : indique le délai du début de la transition (en secondes ou millisecondes).
transition-duration : indique la durée de la transition (en secondes ou millisecondes).
transition-property : on renseigne les propriétés CSS à appliquer à la transition (ex : height, width, color...)
transition-timing-function : indique la manière dont la vitesse varie durant la transition. Cette propriété est associée avec des mots-clé et/ou fonctions et valeurs suivants :
ease (par défaut : rapide au début, lent à la fin)
ease-in (lent au début, rapide vers la fin)
ease-out (rapide au début, plus lent à la fin)
ease-in-out (lent au début et à la fin)
linear (constant)
fonction steps() : indique des intervalles à effectuer lors d'une transition. Elle prend deux valeurs :
step-start : le changement de valeur s’effectue au début de chaque intervalle.
step-end : le changement de valeur s’effectue à la fin de chaque intervalle.
initial : valeur globale par défaut.
inherit : hérite de cette propriété de son élément parent.
cubic-bezier (courbes de bézier) : les quatre valeurs possibles sont des valeurs numériques compris de 0 à 1. Par exemple le mot-clé ease correspond à cubic-bezier(.17,.67,.83,.67)
Une transition CSS s'écrit de cette manière :
.class {
color:red;
transition-property: color;
transition-duration: 1s;
transition-timing-function: ease-in;
transition-delay: .4s
}
.class:hover{
color:blue
}
/* ce qui revient à écrire en version courte */
.class {
transition: color 1s ease-in .4s
}
💡 NB : Une transition se déclenche avec une action utilisateur via les pseudo-classes :active, :hover, :focus, :focus-within, ou encore avec la pseudo-classe de cible :target.
Exemple simple de transition :
On applique dans l'exemple classique ci-dessous un changement progressif d'arrière-plan (passez votre souris sur le bloc) :
.class{
transition: 1s linear
}
.class:hover{
background-color: #3cddc4
}
💡 Bon à savoir : si vous placez vos transitions sur l'état de l'événement plutôt que sur l'état naturel de l'élément, la transition ne se produira que sur l'évènement.
Délai de transition :
Même exemple mais avec un délai (la transition se déclenche après un délai de 1 seconde). Pour cela, nous utiliserons la propriété transition-delay :
.class{
transition: .4s 1s linear
}
.class{
transition-duration : .4s;
transition-delay: 1s;
transition-timing-function : linear
}
Les étapes de transition :
Pour effectuer des étapes entre chaque transition, nous allons utiliser la fonction steps() avec ses deux valeurs step-start et step-end.
Un exemple ci-dessous (passez la souris sur les blocs) :
step-start
step-end
💡 Vous pouvez constater qu'il se passe quatre étapes avant la fin de la transition. Regardez bien la subtilité de chaque transition. Cela ne saute pas aux yeux de prime abord. Avec la valeur step-start, le changement de couleur est immédiat, alors qu'avec la valeur step-end le changement intervient moins rapidement.
Il est tout à fait possible de cumuler plusieurs propriétés qui pourront recevoir une transition. Il suffit pour cela de séparer par une virgule les différentes propriétés ainsi que les propriétés de transition.
Un exemple ci-dessous. Nous allons effectuer une transition sur deux propriétés, à savoir background-color et transform :
💡 Il serait tentant de déclarer la valeur all pour gagner en lisibilité et en gain de place, mais cela reste une mauvais pratique pour la performance. Le mieux étant de déclarer les propriétés qui vont recevoir la transition.
Transition CSS et JavaScript :
L'avenir nous le dira mais il y a fort à parier que le futur de l'animation passera par l'API web animations (WAAPI), permettant d'utiliser des fonctions natives au navigateur.
Dans l'exemple ci-dessous, nous allons déclencher une transition au survol de la souris sur le bouton, puis une autre lorsque le curseur de la souris n'est plus sur le bouton (pour revenir à son état initial).
let transition = document.querySelector('button');
transition.addEventListener('mouseover', function () {
let anim = transition.animate({
transform: ['scale(1)', 'scale(1.5)']
}, 300);
transition.style.transform = 'scale(1.5)';
});
transition.addEventListener('mouseout', function () {
let anim = transition.animate({
transform: ['scale(1.5)', 'scale(1)']
}, 300);
transition.style.transform = '';
});
Animations CSS :
Les propriétés d'animation :
Pour créer une animation CSS, nous allons utiliser la propriété raccourcie animation qui regroupe les propriétés suivantes :
animation-delay : indique le délai du début de l'animation (en secondes ou millisecondes).
animation-direction : indique si l'animation doit alterner entre deux directions ou recommencer au début à chaque cycle de répétition. Elle prend les valeurs suivantes :
normal (par défaut)
reverse
alternate
alternate-reverse
animation-duration : définit la durée d'un cycle de l'animation.
animation-iteration-count : indique le nombre de fois où l'animation est répétée (en chiffre ou avec la valeur infinite pour indéfiniment).
animation-name : il s'agit tout simplement du nom de l'animation.
animation-play-state : permet d'interrompre (valeur paused) ou de reprendre l'animation.
animation-timing-function : indique la manière dont la vitesse varie durant l'animation. Cette propriété est associée avec des mots-clé et/ou fonctions et valeurs suivants :
ease (par défaut : rapide au début, lent à la fin)
ease-in (lent au début, rapide vers la fin)
ease-out (rapide au début, plus lent à la fin)
ease-in-out (lent au début et à la fin)
linear (constant)
fonction steps() : indique des intervalles à effectuer lors d'une animation.
step-start : le changement de valeur s’effectue au début de chaque intervalle.
step-end : le changement de valeur s’effectue à la fin de chaque intervalle.
initial : valeur globale par défaut.
inherit : hérite de cette propriété de son élément parent.
cubic-bezier (courbes de bézier) : les quatre valeurs possibles sont des valeurs numériques compris de 0 à 1. Par exemple le mot-clé ease correspond à cubic-bezier(.17,.67,.83,.67)
animation-fill-mode : indique les valeurs appliquées aux propriétés avant et après l'exécution de l'animation :
none (par défaut)
forwards
backwards
both
Exemple simple d'une animation :
Dans l'exemple ci-dessous, nous allons simplement faire glisser un bloc de gauche à droite de manière linéaire et indéfinie :
Les animations CSS reposent sur des étapes ou images-clés (keyframes). Celles-ci sont définies avec la règle @@keyframes de cette manière :
@keyframes nom-animation{
...
}
💡 Le nom de l'animation que vous définissez à la suite de la règle @@keyframes doit être le même que celui qui suit la propriété animation.
.class{
animation: nom-animation 1s linear
}
@keyframes nom-animation{
...
}
Il faut ensuite définir l'état initial (ou pas selon l'animation (EN)) soit avec le mot-clé from soit en pourcentage (0%) et définir la fin de l'état final soit avec le mot-clé to soit en pourcentage (100%).
@keyframes nom-animation{
from {
...
}
to {
...
}
}
Entre ces deux états, il est possible de définir autant d'images-clé que l'on désire.
💡 Sans autre indication, l'animation repart à son état initial quand toutes les étapes ont été jouées. Nous allons voir comment changer l'ordre des états.
Les changements de direction :
Comme dit précédemment, si l'on indique pas de changement d'état, l'animation revient au stade initial. Reprenons l'exemple simple du bloc se déplacant de gauche à droite. Nous allons faire en sorte que celui-ci alterne entre l'état initial et l'état final, autrement dit qu'il fasse des allers-retours :
Nous avons ajouté la valeur alternate pour alterner la direction, ainsi que la valeur linear de façon à ce que chaque étape possède le même timing.
Le mode de remplissage :
La propriété animation-fill-mode permet de contrôler l’état des éléments avant le début et après la fin (ou les deux) de l’animation.
Il existe plusieurs valeurs pour spécifier un état en particulier.
Exemple comparatif avec les valeurs backwards, forwards et both. On va changer la couleur des arrières-plan et déplacer les div avec la propriété transform (rafraîchir la page pour revoir l'animation) :
backwards (revient aux valeurs avant la première étape)
forwards (garde les valeurs de la dernière étape)
both (combinaison de backwards et forwards)
💡 NB : Attention à la valeur backwards qui est affectée par la propriété animation-iteration-count.
Vous pouvez cumuler les animations en seule seule déclaration en séparant chaque animation par une virgule comme dans l'exemple ci-dessous (rafraîchir la page pour revoir l'animation) :
