Transitions

4.1 Propriété transition

Les transitions CSS permettent d'animer les changements de valeurs des propriétés CSS, créant ainsi des transitions fluides entre leurs états initiaux et finaux. C'est un outil puissant qui améliore l'expérience utilisateur en ajoutant de la dynamique aux pages web. Regardons les aspects clés des transitions, y compris les propriétés, la durée et les fonctions de timing.

La propriété transition regroupe tous les aspects de la transition en une seule propriété. Elle peut inclure :

1. Les propriétés qui seront animées.
2. La durée de l'animation.
3. La fonction de timing.
4. Le délai avant le début de l'animation (optionnel).

Syntaxe :

    
      element {
        transition: property duration timing-function delay;
      }
    
  

Où :

• property : la propriété à laquelle la transition est appliquée (par exemple, width, height, background-color)
• duration : la durée de la transition (par exemple, 2s pour deux secondes ou 500ms pour 500 millisecondes)
• timing-function : la fonction de timing, déterminant la vitesse des changements d'animation (par exemple, ease, linear, ease-in, ease-out, ease-in-out)
• delay : le délai avant le début de la transition (par exemple, 1s pour une seconde)

Exemple :

    
      
       
   
       
   
       
   

     Content 
   
    
  

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s ease-in-out, background-color 1s ease;
      }
    
  

Explication du code :

• transition: width 2s ease-in-out, background-color 1s ease : définit deux transitions : une pour la propriété width avec une durée de 2 secondes et une fonction de timing ease-in-out, et une autre pour la propriété background-color avec une durée de 1 seconde et une fonction de timing ease

4.2 Propriétés des transitions

1. Propriété transition-property

La propriété transition-property spécifie les propriétés de l'élément auxquelles les transitions vont s'appliquer.

Syntaxe :

    
      element {
        transition-property: property1, property2 ...;
      }
    
  

Exemple :

    
      .box {
        transition-property: width, height, background-color;
      }
    
  

2. Propriété transition-duration

La propriété transition-duration définit la durée de la transition.

Syntaxe :

    
      element {
        transition-duration: time;
      }
    
  

Exemple :

    
      .box {
        transition-duration: 2s, 1s, 3s;
      }
    
  

3. Propriété transition-timing-function

La propriété transition-timing-function définit la vitesse des changements d'animation au fil du temps.

Syntaxe :

    
      element {
        transition-timing-function: function;
      }
    
  

Exemple :

    
      .box {
        transition-timing-function: ease-in, linear, ease-out;
      }
    
  

4. Propriété transition-delay

La propriété transition-delay définit le délai avant le début de la transition.

Syntaxe :

    
      element {
        transition-delay: time;
      }
    
  

Exemple :

    
      .box {
        transition-delay: 1s, 0s, 500ms;
      }
    
  

4.3 Durée des transitions

La durée de la transition détermine combien de temps durera l'animation du changement de propriété. Elle est spécifiée en secondes (s) ou millisecondes (ms).

Exemple :

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s, height 1s, background-color 500ms;
      }
    
  

Explication du code :

• transition: width 2s, height 1s, background-color 500ms : définit que la transition pour la propriété width durera 2 secondes, pour height — 1 seconde, et pour background-color — 500 millisecondes.

4.4 Fonctions de timing

Les fonctions de timing définissent comment la valeur de la propriété change au fil du temps. Elles permettent de créer divers effets d'animation.

Fonctions de timing principales :

• ease : l'animation commence lentement, s'accélère au milieu et ralentit à la fin
• linear : l'animation se déroule à une vitesse constante du début à la fin
• ease-in : l'animation commence lentement puis s'accélère
• ease-out : l'animation commence vite puis ralentit
• ease-in-out : l'animation commence et finit lentement, accélérant au milieu

Exemple :

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        transition: width 2s ease-in-out, height 1s linear, background-color 500ms ease;
      }
    
  

Explication du code :

• ease-in-out : transition fluide, commençant et finissant lentement
• linear : transition à vitesse constante
• ease : transition avec un début et une fin lents, s'accélérant au milieu

1

Mission

Frontend SELF FR, niveau 23, leçon 3

Bloqué

Délai de transition

Délai de transition

Ouvrir

1

Mission

Frontend SELF FR, niveau 23, leçon 3

Bloqué

Transitions complexes

Transitions complexes

Ouvrir