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

21 mai 2024

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);
    }
}

Dans cet exemple, une boîte rouge glisse de la gauche vers sa position initiale en 5 secondes. Rechargez la page pour revoir l’animation.

Animation avec Délai et direction Alternée

Cet exemple montre comment utiliser un délai et une direction alternée :

<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);
    }
}

Ici, une balle verte rebondit de haut en bas avec un délai de 0,5 seconde avant le début de l’animation, et l’animation alterne entre monter et descendre.

La propriété CSS animation offre un moyen puissant et flexible de créer des animations dynamiques et interactives sur les pages web. En combinant les différentes sous-propriétés et en définissant des animations personnalisées avec @keyframes, il est possible de réaliser une variété d’effets visuels engageants. Les exemples concrets présentés illustrent quelques-unes des nombreuses possibilités offertes par CSS pour animer des éléments HTML.