Créer des animations avec CSS est relativement simple grâce à l’utilisation des propriétés @keyframes et animation. Voici les étapes principales et des exemples pour bien comprendre :

1. Utiliser @keyframes pour définir les étapes de l’animation

La règle @keyframes permet de définir comment un élément doit changer de style à différentes étapes de l’animation.

@keyframes nomAnimation {
  from {
    transform: translateX(0); /* Position de départ */
  }
  to {
    transform: translateX(100px); /* Position finale */
  }
}

2. Appliquer l’animation avec la propriété animation

On utilise la propriété animation pour lier l’animation à un élément.

.element {
  animation: nomAnimation 2s ease-in-out infinite;
}

Propriétés importantes pour configurer l’animation

• animation-name : Nom de l’animation (lié à @keyframes).
• animation-duration : Durée de l’animation (ex. : 2s ou 500ms).
• animation-timing-function : Accélération (ex. : linear, ease, ease-in, ease-out).
• animation-delay : Délai avant de démarrer l’animation.
• animation-iteration-count : Nombre de répétitions (infinite pour répéter indéfiniment).
• animation-direction : Direction de l’animation (normal, reverse, alternate).

Exemples d’animations CSS

1. Animation de déplacement horizontal

<div class="box"></div>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: coral;
    animation: move 3s ease-in-out infinite;
  }

  @keyframes move {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(200px);
    }
    100% {
      transform: translateX(0);
    }
  }
</style>

2. Animation de rotation

<div class="circle"></div>

<style>
  .circle {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>

3. Animation de clignotement

<div class="text">Hello!</div>

<style>
  .text {
    font-size: 2rem;
    color: black;
    animation: blink 1s step-end infinite;
  }

  @keyframes blink {
    50% {
      opacity: 0;
    }
  }
</style>

Combiner plusieurs animations

Il est possible de combiner plusieurs animations sur le même élément :

.element {
  animation: move 2s ease-in-out infinite, fade 3s linear infinite;
}

Conclusion

Avec CSS, les possibilités d’animation sont vastes et permettent de rendre un site web interactif et attrayant. Si tu souhaites des exemples plus complexes, comme des animations en 3D ou des transitions fluides, n’hésite pas à demander ! 😊