Article original : How to Create Custom CSS Animations with Examples

Les animations sont un composant crucial de la conception web moderne. Elles vous permettent de créer des éléments web dynamiques et engageants qui attirent plus de clients et génèrent plus de ventes.

Dans cet article, nous allons discuter de la manière de créer des animations personnalisées cool en utilisant CSS.

Prérequis

Avant de continuer avec cet article, assurez-vous d'avoir des connaissances de base en HTML et CSS.

Je supposerai que vous êtes familier avec les sélecteurs CSS, la définition de la taille et de la couleur des éléments, le positionnement des éléments, l'ajustement de l'opacité, et la transformation des éléments.

Comment créer votre première animation CSS

Commençons par préparer un élément HTML.

<body>
  <div class="square"></div>
</body>

.square {
  width: 100px;
  height: 100px;
  background-color: purple;

  /* Centrer l'élément */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Les lignes 7 à 10 démontrent une méthode couramment utilisée pour centrer un élément en utilisant CSS. Voici le résultat du code ci-dessus :

square center Carré centré

Avant de commencer à créer l'animation, vous devez d'abord réfléchir à l'effet que vous souhaitez obtenir.

Par exemple, pour ce tutoriel, je veux créer un effet de rebond pour le carré. Cela signifie que je dois créer une animation basée sur la propriété top afin que le carré puisse monter et descendre.

@keyframes bounce {
  0% {
    top: 90%;
  }
  100% {
    top: 10%;
  }
}

Pour définir une animation, vous devez utiliser la règle @keyframes, qui vous permet de définir des images clés dans le processus d'animation.

Les images clés sont définies avec des valeurs en pourcentage, commençant par 0% et se terminant par 100%. Par exemple, dans notre exemple, l'animation commencera par top: 90%;, et se terminera par top: 10%;, et après cela, elle reviendra à 50%.

Et, bien sûr, vous devez lier l'animation bounce avec le carré (animation-name) et également indiquer au navigateur combien de temps vous souhaitez que cette animation dure (animation-duration). Voici comment faire :

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
}

square moves up Un carré qui monte

Comment ajouter plusieurs images clés

Mais comme vous pouvez le voir, le carré commence par le bas, monte en haut, et revient ensuite au centre. Ce n'est pas exactement un effet de rebond. Alors, comment faire pour que le carré redescende ?

Pour cela, vous pouvez configurer une troisième image clé comme ceci :

@keyframes bounce {
  0% {
    top: 90%;
  }
  50% {
    top: 10%;
  }
  100% {
    top: 90%;
  }
}

De cette manière, le carré commencera par le bas (top: 90%;), montera en haut (top: 10%;), et redescendra (top: 90%;).

square moves up and then down Le carré monte puis redescend

Comment créer une animation répétitive

Il y a un problème qui doit encore être résolu. L'animation ne se joue qu'une seule fois. En pratique, vous pourriez vouloir que votre animation se répète plusieurs fois pour créer l'effet que le carré rebondit réellement.

Au lieu de créer plus d'images clés, ce qui n'est pas facile, vous pouvez définir une propriété animation-iteration-count et spécifier le nombre de fois que vous voulez que l'animation se répète.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: 5;
}

repeat animation 5 times Le carré monte et descend cinq fois

Et si vous voulez que l'animation dure indéfiniment, spécifiez simplement infinite.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Comment utiliser une fonction de timing pour une animation plus fluide

Enfin, l'effet de rebond a commencé à fonctionner, mais il y a encore place à l'amélioration. Le mouvement du carré semble un peu peu naturel. L'effet de rebond serait meilleur si vous pouviez lisser le mouvement.

Cela peut être réalisé avec une fonction de timing. Par défaut, le navigateur supposera une fonction de timing linear, ce qui signifie que l'animation aura une vitesse constante du début à la fin. Mais vous pouvez changer cela en utilisant la propriété animation-timing-function, comme ceci :

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

En spécifiant ease-in-out, vous dites au navigateur de commencer l'animation lentement et de la terminer progressivement. En conséquence, l'animation entière sera beaucoup plus fluide.

ease in out ease-in-out rendant le mouvement du carré fluide

La courbe de Bézier cubique

La valeur ease-in-out représente en réalité une équation mathématique appelée Cubic Bezier. Je vous épargnerai les définitions mathématiques complexes, et vous devez seulement savoir que la fonction définit une courbe avec quatre points de contrôle.

cubic-bezier.com est un outil en ligne qui vous permet de personnaliser la courbe en déplaçant simplement les points de contrôle.

cubic bezier Une courbe de Bézier cubique

Les points contrôlent la forme de la courbe, et la pente de la courbe contrôle ensuite la vitesse de l'animation. Par exemple, le graphique ci-dessus indique que l'animation commencera lentement, accélérera, puis se terminera en douceur.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.17, 0.67, 0.8, 0.36);
}

Dans la plupart des cas, vous n'avez pas à définir une courbe de Bézier cubique personnalisée. Il existe plusieurs courbes prédéfinies qui devraient suffire pour la plupart des cas d'utilisation.

ease représente la courbe cubic-bezier(0.25, 0.1, 0.25, 1). L'animation commencera par accélérer lentement puis décélérera pour s'arrêter.

ease Courbe de Bézier cubique pour ease

ease-in représente la courbe cubic-bezier(0.42, 0, 1, 1). L'animation commencera en douceur puis s'arrêtera plutôt brusquement.

ease in Courbe de Bézier cubique pour ease-in

ease-out représente la courbe cubic-bezier(0, 0, 0.58, 1). L'animation commencera brusquement puis ralentira pour s'arrêter en douceur.

ease out Courbe de Bézier cubique pour ease-out

ease-in-out représente la courbe cubic-bezier(0.42, 0, 0.58, 1). L'animation sera fluide aux deux extrémités.

ease in out Courbe de Bézier cubique pour ease-in-out

La fonction steps()

Outre la courbe fluide, vous pouvez également spécifier une fonction de pas. La fonction steps() prend deux arguments. Le premier spécifie le nombre de pas, et le second définit le point auquel le changement se produit dans le pas, soit au début soit à la fin.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(5, start);
}

Dans ce cas, l'animation sera divisée en cinq étapes, et pour chaque étape, le changement se produira au début de l'étape.

5 steps Une démonstration de la fonction steps

Il existe également deux raccourcis disponibles pour la fonction steps(). step-start correspond à steps(1, start), et step-end correspond à steps(1, end).

Comment combiner plusieurs animations

Jusqu'à présent, nous avons couvert tous les fondamentaux que vous devez comprendre pour créer des animations CSS. Et maintenant, il est temps de devenir plus créatif.

Nos exemples précédents se sont tous concentrés sur le changement de la propriété top afin de créer l'effet de rebond. Vous pouvez, en fait, combiner plusieurs propriétés en une seule animation. Par exemple, vous pouvez créer un effet de pulsation en changeant la forme et l'opacité de l'élément ensemble.

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.ball {
  width: 100px;
  height: 100px;
  background-color: purple;
  border-radius: 50%;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  animation: pulse 2s ease-in-out infinite;
}

Notez également que les propriétés d'animation peuvent être combinées en un raccourci, animation.

pulse L'animation d'effet de pulsation

Autres propriétés liées aux animations

Outre les propriétés d'animation que nous avons discutées jusqu'à présent, il existe certaines propriétés diverses dont nous devrions parler. Elles peuvent également être utiles parfois.

Tout d'abord, il y a la propriété animation-direction, qui définit comment l'animation sera jouée. La propriété accepte quatre valeurs différentes :

  • normal : L'animation est jouée vers l'avant.
  • reverse : L'animation est jouée vers l'arrière.
  • alternate : L'animation est jouée vers l'avant d'abord, puis vers l'arrière. Cela ne fonctionne que lorsque animation-iteration-count est supérieur à 1.
  • alternate-reverse : L'animation est jouée vers l'arrière d'abord, puis vers l'avant.

Par défaut, l'animation commencera à jouer immédiatement après le chargement de la page. Mais vous pouvez changer cela avec la propriété animation-delay, qui spécifie combien de temps vous souhaitez attendre avant que l'animation ne commence.

Enfin, la propriété animation-fill-mode détermine comment l'élément sera affiché avant et après que l'animation soit jouée. Par défaut, l'élément ne conservera aucun style de l'animation. Après l'arrêt de l'animation, l'élément reviendra à la normale.

Lorsque animation-fill-mode est défini sur forwards, l'élément conservera les styles de la dernière image clé de l'animation après que l'animation soit jouée.

Lorsque défini sur backwards, l'élément prendra les styles de la première image clé de l'animation dès que l'animation est jouée.

Lorsque défini sur both, l'élément conservera les styles de la première image clé avant que l'animation ne commence (se comporte comme backwards), et il conservera également les styles de la dernière image clé après que l'animation soit terminée (comme forwards).

Conclusion

Ce tutoriel a couvert tout ce que vous devez savoir pour commencer à créer des animations CSS en utilisant la règle @keyframes.

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

Nous avons également passé en revue plusieurs propriétés CSS liées aux animations :

  • animation-duration : Définit la durée de l'animation.
  • animation-iteration-count : Définit le nombre de fois que l'animation se répète.
  • animation-timing-function : Spécifie la fonction de timing, qui contrôle la vitesse à laquelle l'animation est jouée.
  • animation-direction : La direction dans laquelle l'animation est jouée.
  • animation-delay : Le délai avant que l'animation ne commence.
  • animation-fill-mode : Si les styles de l'animation doivent être conservés après sa fin.

Pour des lectures supplémentaires sur HTML et CSS, consultez cette série de cours -> HTML & CSS: A Practical Guide.