Propriétés des animations

7.1 Propriété animation-name

Les animations CSS permettent de créer des effets visuels dynamiques et fluides, améliorant l'interface utilisateur et la rendant plus interactive. Les propriétés des animations permettent de contrôler différents aspects de l'animation, tels que le nom, la durée, la fonction de timing et le délai. Maintenant, nous allons examiner ces propriétés en détail et montrer comment les utiliser.

La propriété animation-name définit le nom de l'animation qui sera appliquée à l'élément. Le nom doit correspondre au nom défini dans la règle @keyframes.

Syntaxe :

    
      element {
        animation-name: animation-name;
      }
    
  

Où :

• animation-name: le nom de l'animation défini dans @keyframes

Exemple :

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
      }
    
  

Explication du code :

• @keyframes moveRight: définit une animation nommée moveRight, qui déplace l'élément vers la droite
• .box: élément avec l'animation moveRight appliquée

7.2 Propriété animation-duration

La propriété animation-duration définit la durée de l'animation. La valeur est spécifiée en secondes (s) ou en millisecondes (ms).

Syntaxe :

    
      element {
        animation-duration: time;
      }
    
  

Où :

• time: la durée de l'animation (par exemple, 2s pour deux secondes ou 500ms pour 500 millisecondes).

Exemple :

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
      }
    
  

Explication du code :

• animation-duration: 2s: fixe la durée de l'animation moveRight à 2 secondes

7.3 Propriété animation-timing-function

La propriété animation-timing-function définit la vitesse de changement de l'animation dans le temps. Elle permet de créer différents effets d'animation, tels que l'accélération, le ralentissement, etc.

Syntaxe :

    
      element {
        animation-timing-function: function;
      }
    
  

Où :

• function: la fonction de timing qui détermine la vitesse de changement de l'animation (par exemple, ease, linear, ease-in, ease-out, ease-in-out)

Exemple :

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
      }
    
  

Explication du code :

• animation-timing-function: ease-in-out: définit la fonction de timing pour l'animation moveRight, rendant l'animation fluide avec un début et une fin lente, et une accélération au milieu

Principales fonctions de timing :

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

7.4 Propriété animation-delay

La propriété animation-delay détermine le délai avant le début de l'animation. La valeur est spécifiée en secondes (s) ou en millisecondes (ms).

Syntaxe :

    
      element {
        animation-delay: time;
      }
    
  

Où :

• time: le délai avant le début de l'animation (par exemple, 1s pour une seconde ou 500ms pour 500 millisecondes)

Exemple :

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
      }
    
  

Explication du code :

• animation-delay: 1s: fixe le délai avant le début de l'animation moveRight à 1 seconde