Animations CSS – Donner vie aux éléments

Conférence 13 : Animations CSS – Donner vie aux éléments

Bienvenue à la conférence 13 du cours « De la base à la brillance » ! Dans cet article, nous explorerons les Animations CSS, un moyen puissant de donner de la vie à vos éléments Web en les animant au fil du temps. Avec les animations CSS, vous pouvez créer des effets fluides et dynamiques qui améliorent l'expérience et l'engagement utilisateur.

1. Présentation des animations CSS

Les animations CSS permettent aux éléments de passer d'un style à l'autre sur une période définie. Vous pouvez contrôler le fonctionnement de l'animation à l'aide de deux propriétés clés :

• @keyframes : définit le comportement de l'animation à des moments spécifiques.
• animation : applique l'animation à un élément et contrôle son timing et sa durée.

2. La règle @keyframes

La règle @keyframes spécifie les styles que l'élément doit avoir à différents moments de l'animation. Vous définissez des images clés à différents pourcentages (0 % étant le début, 100 % étant la fin).

• Exemple : Animation d'images clés de base pour changer la couleur d'arrière-plan.

  @keyframes changeColor {
    0% {
      background-color: red;
    }
    100% {
      background-color: blue;
    }
  }

Dans cet exemple :

• La couleur d'arrière-plan passera progressivement du rouge au bleu au fur et à mesure de la progression de l'animation.

3. Application d'animations avec la propriété animation

Pour appliquer l'animation à un élément, vous utilisez la propriété animation. Cette propriété nécessite quelques valeurs clés :

• Nom : Le nom de l'animation d'images clés (par exemple, changeColor).
• Durée : combien de temps l'animation doit s'exécuter (par exemple, 2 s pendant 2 secondes).
• Fonction de synchronisation : La courbe de vitesse de l'animation (par exemple, facilité, linéaire).

• Délai : Combien de temps attendre avant de démarrer l'animation.

• Exemple : Appliquer une animation à un élément.
  

  .box {
    animation: changeColor 2s ease-in-out infinite;
  }

Dans ce cas :

• L'élément .box changera de couleur du rouge au bleu en 2 secondes, en suivant une courbe d'entrée-sortie facile, et l'animation se répétera à l'infini.

4. Fonctions de synchronisation d'animation

La fonction de synchronisation contrôle la façon dont l'animation progresse dans le temps. Certaines fonctions de synchronisation courantes incluent :

• linéaire : L'animation progresse à une vitesse constante.
• facilité : L'animation démarre lentement, accélère, puis ralentit.
• facilité d'insertion : L'animation démarre lentement et accélère.

• facilité : L'animation démarre rapidement et ralentit.

• Exemple : Application d'une fonction de synchronisation différente.
  

  .box {
    animation: changeColor 3s linear;
  }

Ici :

• L'animation progressera à une vitesse constante, prenant 3 secondes.

5. Itération et retard d'animation

Vous pouvez contrôler le nombre de répétitions d'une animation à l'aide de la propriété animation-iteration-count. Vous pouvez également retarder le début de l'animation en utilisant animation-delay.

• Exemple : Une animation qui se répète 3 fois et démarre après un délai d'une seconde.

  .box {
    animation: changeColor 2s ease-in 3;
    animation-delay: 1s;
  }

Dans ce cas :

• L'animation commencera 1 seconde après le chargement de la page et se répétera 3 fois.

6. Mode de remplissage d'animation

La propriété animation-fill-mode définit à quoi doit ressembler un élément avant et après l'animation. Les valeurs communes incluent :

• aucun : L'élément revient à son état d'origine après l'animation.
• forwards : L'élément conserve l'état final de l'animation.

• à l'envers : L'élément prend l'état initial avant le début de l'animation.

• Exemple : Conserver l'état final après l'animation.
  

  .box {
    animation: changeColor 2s ease forwards;
  }

Ici :

• L'élément restera bleu une fois l'animation terminée, au lieu de revenir au rouge.

7. Animations multiples

Vous pouvez appliquer plusieurs animations à un élément en les séparant par des virgules.

• Exemple : Animer à la fois la couleur et la position.

  @keyframes moveBox {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100px);
    }
  }

  .box {
    animation: changeColor 2s ease, moveBox 2s ease-in-out;
  }

Dans ce cas :

• Le .box changera de couleur et se déplacera de 100 pixels vers la droite en même temps.

8. Prise en charge du navigateur et propriétés préfixées

Bien que les navigateurs modernes prennent en charge les animations CSS, c'est toujours une bonne idée d'ajouter des préfixes de fournisseur pour les anciennes versions des navigateurs.

• Example: Adding vendor prefixes.

  .box {
    -webkit-animation: changeColor 2s ease;
    -moz-animation: changeColor 2s ease;
    animation: changeColor 2s ease;
  }

This ensures compatibility across different browsers.

Practice Exercise

1. Create a bouncing ball animation using @keyframes that makes the ball move up and down smoothly.
2. Add an animation to an image that rotates it 360 degrees on hover.

Next Up: In the next lecture, we’ll explore CSS Transitions, which allow you to animate changes in CSS properties smoothly. You’ll learn how to create engaging hover effects and other interactions that enhance user experience.

follow me on LinkedIn

Ridoy Hasan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!