Article original : How to Use Animations in CSS

Utilisation des animations CSS

Les animations CSS ajoutent de la beauté aux pages web et rendent les transitions d'un style CSS à un autre magnifiques.

Pour créer une séquence d'animation CSS, nous avons différentes sous-propriétés dans la propriété animation en CSS :

  • animation-delay
  • animation-direction
  • animation-duration
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • animation-fill-mode

Exemple de séquence d'animation CSS pour déplacer du texte à travers l'écran

Dans la partie HTML, nous aurons un div avec la classe container et un h3 avec le texte Hello World :

<div class="container">
    <h3> Bonjour le monde ! </h3>
</div>

Pour la partie CSS :

.container {
    /* Nous allons définir la largeur, la hauteur et le padding du conteneur */
    /* Le text-align à center */
    width: 400px;
    height: 60px;
    padding: 32px;
    text-align: center;

    /* Utiliser l'animation `blink` pour répéter indéfiniment pendant une durée de 2,5s */
    animation-duration: 2.5s;           
    animation-iteration-count: infinite;
    animation-direction: normal;        
    animation-name: blink;              

    /* La même chose peut être écrite en raccourci comme */
    /* ------------------------------------------------- */
    /* animation: 2.5s infinite normal blink;           */
}
@keyframes blink {
    0%, 100% {              /* Définit les propriétés à ces frames */
        background: #333;
        color: white;
    }

    50% {                   /* Définit les propriétés à ces frames */
        background: #ccc;
        color: black;
        border-radius: 48px;
    }
}

Imgur

Plus d'informations sur les animations CSS :