La propriété CSS animation pour animer des éléments HTML

La propriété CSS animation permet d’animer des éléments HTML en définissant des transitions entre différents états de style. Elle est utilisée pour créer des effets visuels dynamiques sans avoir besoin de JavaScript. Nous allons explorer la propriété animation, ses différentes sous-propriétés, et vous fournir des exemples concrets pour illustrer son utilisation.

Les avantages de l’utilisation de la propriété animation

Avec la propriété CSS animation vous pouvez créer de nombreuses animations. Par exemple, faire rebondir une balle, faire clignoter un texte, afficher une barre de progression, créer des effets de survol et bien plus encore…

L’utilisation de la propriété animation présente plusieurs avantages :

• Flexibilité : Vous pouvez créer une grande variété d’animations complexes.
• Performance : Les animations CSS sont généralement plus performantes que les animations JavaScript.
• Facilité d’utilisation : La syntaxe de la propriété animation est relativement simple à apprendre.
• Compatibilité : La propriété animation est bien prise en charge par les navigateurs modernes.

Les sous-propriétés de la propriété CSS animation

La propriété animation est une propriété CSS raccourcie qui combine plusieurs sous-propriétés. Voici ses principales sous-propriétés :

• animation-name : spécifie le nom de l’animation, qui correspond au nom d’une animation définie avec @keyframes.
• animation-duration : définit la durée de l’animation (par exemple, 2s pour deux secondes).
• animation-timing-function : spécifie la courbe de vitesse de l’animation (par exemple, linear, ease, ease-in, ease-out, etc.).
• animation-delay : définit un délai avant le début de l’animation.
• animation-iteration-count : indique le nombre de fois que l’animation doit être jouée (par exemple, infinite pour une boucle infinie).
• animation-direction : détermine si l’animation doit être jouée dans le sens normal, à l’envers, ou en alternance (par exemple, normal, reverse, alternate, alternate-reverse).
• animation-fill-mode : spécifie le style de l’élément lorsque l’animation n’est pas en cours (par exemple, none, forwards, backwards, both).
• animation-play-state : indique si l’animation est en cours de lecture ou en pause (par exemple, running, paused).

Définir une Animation avec @keyframes

Pour utiliser la propriété animation, il est nécessaire de définir des étapes d’animation avec la règle @keyframes. Voici un exemple simple :

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

Dans cet exemple, l’animation slideIn fait glisser un élément de la gauche vers sa position initiale.

Les règles @keyframes définissent les étapes clés de l’animation, en spécifiant les valeurs des propriétés CSS pour chaque étape. Les keyframes CSS, tels des jalons dans un voyage, vous permettent de définir les étapes clés d’une animation, insufflant vie et mouvement à vos éléments web. En orchestrant des transitions entre différents styles CSS, vous créez des effets visuels captivants qui enrichissent l’expérience utilisateur.

Définir les keyframes : Le cœur de l’animation

Les keyframes se déclarent à l’aide de la règle @keyframes, introduisant un nom unique pour votre animation. Ensuite, vous définissez les étapes clés, chacune représentée par un pourcentage du temps d’animation et associée aux styles CSS souhaités.

Imaginez une animation où un élément rebondit. À 0%, l’élément est au repos. À 50%, il atteint son point culminant. À 100%, il revient à sa position initiale. Vous définissez ainsi les keyframes pour capturer ces étapes clés :

@keyframes rebond {
  0% {
    transform: translateY(0); /* Début au repos */
  }
  50% {
    transform: translateY(-50px); /* Point culminant */
  }
  100% {
    transform: translateY(0); /* Retour à la position initiale */
  }
}

Appliquer l’animation aux éléments : Donner vie à votre création

Une fois vos keyframes définis, il est temps de les associer aux éléments HTML qui prendront vie. La propriété animation est votre baguette magique. Elle permet de spécifier le nom de l’animation, sa durée, son comportement de répétition et bien plus encore.

Pour appliquer l’animation de rebond à un paragraphe, il suffit de :

p {
  animation: rebond 2s linear infinite;
}

Exemple concret de la propriété CSS animation

Animation de Glissement

Voici un exemple concret qui applique l’animation slideIn à un élément :

<div class="box">

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: slideIn 5s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(-500%);
    }
    to {
        transform: translateX(0);
    }
}

<div class="ball"></div>

.ball {
    width: 50px;
    height: 50px;
    background-color: green;
    border-radius: 50%;
    animation: bounce 2s ease-in-out 0.5s infinite alternate;  
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0);
    }
}