Blog
Aller au contenu

Guillaume Duverger

Développement & graphisme


Accueil » Développement » Apprendre CSS » Transitions / animations CSS

Sommaire
  1. Les transitions et animations CSS c'est quoi ?
  2. Les transitions
    1. Les propriétés de transition
    2. Exemple simple de transition
    3. Délai de transition
    4. Les étapes de transition
    5. Accumulation d'effets de transition
    6. Transition CSS et JavaScript
  3. Les animations
    1. Les propriétés d'animation
    2. Exemple simple d'animation
    3. Les étapes d'une animation
    4. Les changements de direction
    5. Le mode de remplissage
    6. Accumulation d'animations
    7. Animation CSS et JavaScript
  4. Quiz sur les transitions et animations CSS
  5. Aller plus loin
Télécharger ce cours en pdf

👉 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: #01FF89

}	

💡 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.




.etape-start,.etape-end{

background-color:#7A5FFF

}

.etape-start{

transition-timing-function:steps(4,start)

}
.etape-end{

transition-timing-function: steps(4,end)

}


.etape-start:hover,
.etape-end:hover{

transition: background-color 3s;


}



Accumulation d'effets de transition :

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 :




.class{

outline:1px solid transparent;
background-color: #7A5FFF;
transition:background-color 2s, transform 2s 1s

}

.class:hover{

transform: rotate(1turn) scale(2);
background-color: #01FF89

}


💡 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).




button {
  
  font-size: 2rem;
  border: none; 
  color : white;
  background-color: #7A5FFF;
  padding: .5rem .875rem;

}





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 :



.class {
  
background: #7A5FFF;
height: 200px;
width: 200px;
animation: votre_animation 3s infinite
}

@keyframes votre_animation{

to{

transform: translatex(100%)

}
}



Les étapes d'une animation :

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.




@keyframes nom-animation{

0% {

...
}

10% {

...

}
20%
{

...

}
...
}


💡 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 :



.class{


background: #7A5FFF;
height:200px;
width:200px;
animation:votre_animation 2s linear infinite alternate

}

@keyframes votre_animation{

to{

transform: translatex(100%)

}

}


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.



.exemple-backwards {

color:white;
text-align:center;
width:300px;
height: 50px;
background-color: #7A5FFF;
animation: ex-back 3s backwards

}


@keyframes ex-back {
	
from {

transform: translatex(-100%);
background-color: #01FF89
	
}
	
to {

transform: translatex(0);
background-color: #01FF89

	}
}

.exemple-forwards {
text-align:center;
width:300px;
height: 50px;
background-color: #7A5FFF;
animation: ex-for 3s forwards 

}
@keyframes ex-for {

from { 
	
transform: translatex(-100%);
background-color: #01FF89
}

to {
transform: translatex(0);
background-color: #01FF89

}
}

.ex-both {
text-align:center;
width:300px;
height: 50px;
background-color: #7A5FFF;
animation: ex-both 3s 2s both;
}
	
@keyframes ex-both {
	
from { 
	
	transform:translatex(100%);
	background-color: #01FF89
	
	}
	
to {

	transform: translatex(0);
	background-color: #01FF89
	
	}
}
	


Accumulation d'animations :

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) :



.class{

background:#7A5FFF;
height:200px;
width:200px;
animation:votre-animation 2s, autre-animation 1s 2s forwards

}



Animation CSS et JavaScript

Tout comme il est possible d'utiliser conjointement JavaScript et CSS sur les transitions, cela est également faisable avec les animations.



let exAnim = document.getElementById('ex-anim-js').animate([
{ transform: 'scale(1)', offset: 0 },
{ transform: 'scale(.33)', offset: .33 },
{ transform: 'scale(.66)', offset: .66 },
{ transform: 'scale(.6)',  offset: 1 }
  ], {

duration: 800, 
easing: 'ease-in-out', 
iterations: Infinity,
direction: 'alternate' 

  });
  

Ce qui correspondrait en CSS à ceci :



@keyframes votre_animation {

  0% {
    transform: scale(1); 

  }
  
  33% {
    transform: scale(.33); 
  
  }
  
  66% {
    transform: scale(.66); 
    
  }
  
  100% {
    transform: scale(.6);
  
  }
}


👉 Quiz sur les transitions et animations CSS

Question : Quelle est la propriété raccourcie permettant de déclarer une transition ?


Question : Quelle unité permet de préciser la durée d'une transition ?


Question : Quelle fonction utilise t-on pour créer des étapes de transition ou d'animation ?


Question : Quelle valeur permet d'alterner la direction d'un élément dans une animation CSS ?


Question : Quelle propriété permet d'interrompre ou de reprendre une animation ?

👉 Aller plus loin :

Transitions :

Exemples et liste des propriétés qui peuvent recevoir des transitions(EN).

Les transitions (EN) expliquées.

Comprendre la propriété transition-timing-function (EN).

Animations :

Liste des propriétés que l'on peut animer.

Bon à savoir : les transitions et les propriétés héritées (EN).

Relancer une animation CSS (FR) avec JavaScript

Article sur les performances (EN) des animations

Créez des animations complexes en ligne : animations CSS3.

Bibliothèque regroupant différentes fonctions de vitesse d’exécution d'une animation ou transition.