CSS · Leçon 7

Transitions & animations

Un peu de mouvement rend une interface vivante et compréhensible. Tout ça, sans une ligne de JavaScript.

Les transitions

Une transition adoucit le passage d'un style à un autre (souvent au survol). Survole les boutons :

Courbes de vitesse : ease (défaut), linear, ease-in, ease-out, ease-in-out.

Les transformations

transform déplace, agrandit ou tourne un élément sans décaler les autres.

Boîte

      

    

    

      
Pour agrandir un bouton au survol sans pousser les éléments voisins, on utilise…

      
    
        
  1. width et height plus grands
    2. 
        
  2. transform: scale(1.1)
    3. 
        
  3. font-size plus grand
    4. 
      

      
transform ne change pas la place occupée dans la page. Bonus : c'est aussi beaucoup plus fluide à animer.

    

  


  

    
Les animations @keyframes

    
Une transition va de A à B quand un état change. Une animation joue toute seule un scénario d'étapes, éventuellement en boucle.

    



    

    
Accessibilité Certaines personnes sont gênées par le mouvement. On peut réduire les animations pour elles avec @media (prefers-reduced-motion: reduce) { … }.

  


  

    
À toi de jouer

    

      
Le bouton vivant

      
    
        
  • Au survol, .btn grossit (transform: scale(1.1)) et son fond devient crimson.
    • 
        
  • Le changement dure 0.3s (transition sur .btn, pas sur :hover).
    • 
      

      



      

      
IndiceIl faut deux règles : .btn (état normal) et .btn:hover (pendant le survol).

      
IndiceLa transition se met sur .btn pour jouer à l’aller et au retour : transition: all 0.3s;

      
IndiceLa règle de survol :
.btn:hover {
  transform: scale(1.1);
  background: crimson;
}


    


    

      
Le loader qui tourne

      
    
        
  • Crée une animation @keyframes tourne qui fait un tour complet (rotate(360deg)).
    • 
        
  • Applique-la à .loader : durée 1s, vitesse constante (linear), à l'infini.
    • 
      

      



      

      
IndiceUne animation, c’est deux choses : les étapes (@keyframes nom { … }) et leur application sur l’élément (animation: …).

      
IndicePour un tour complet, une seule étape suffit : to { transform: rotate(360deg); }

      
IndiceSur .loader : animation: tourne 1s linear infinite; (nom, durée, vitesse, répétition).


    

  


  

    
À retenir