Animations avancées à l’aide de CSS —

La création d’animations CSS avancées est idéale pour l’expérience utilisateur et la conception. Vous pouvez créer un site Web interactif qui plaît au visiteur et lui permet de se souvenir de votre site Web. Les animations sonnent comme un sujet difficile, mais une fois que vous les aurez comprises, vous pourrez créer des sites Web incroyables comme celui-ci! Oui, ceci n’est créé qu’avec CSS !

Tout d’abord, plongeons dans la magie et la puissance de la cubic-bezier une fonction.

cubic-bezier: Qu’est-ce que c’est et comment pouvons-nous l’utiliser ?

Le cubic-bezier La fonction en CSS est une fonction d’accélération qui vous donne un contrôle complet sur le comportement de votre animation par rapport au temps. Voici la définition officielle :

« Une fonction d’accélération de Bézier cubique est un type de fonction d’accélération défini par quatre nombres réels qui spécifient les deux points de contrôle, P1 et P2, d’une courbe de Bézier cubique dont les extrémités P0 et P3 sont fixées respectivement à (0, 0) et (1, 1). Les coordonnées x de P1 et P2 sont limitées à la plage [0, 1].”

— Ébauche de recommandation candidate W3C CSS Easing Functions niveau 1, 1 avril 2021

Si vous souhaitez en savoir plus sur les fonctions d’accélération, vous pouvez consulter cet article d’Adrian Bece. Il va dans les coulisses de la façon dont linéaire, cubic-bezier et les fonctions d’escalier fonctionnent.

L’axe des abscisses (temps) est restreint entre [0,1]. Cependant, l’axe y (sortie) n’est pas limité à une certaine plage.

Notre objectif pour le cube-bézier est de créer la parabole glissante au début de l’animation requise. Mais pour y arriver, nous allons commencer petit et apprendre à créer une courbe parabolique à l’aide de cubique-bézier.

La courbe parabolique

À partir de la définition de la courbe parabolique, vous remarquerez peut-être que faire une courbe parabolique parfaite semble impossible car P0 doit être à (0, 0) et P3 doit être à (1, 1) alors que les courbes paraboliques commencent et se terminent sur le même axe horizontal , nous aurons donc besoin que P3 soit à (1, 0).

C’est vrai qu’on ne peut pas faire une parabole parfaite. Cependant, nous pouvons créer quelque chose qui s’en rapproche.

Création du ballon

Nous devons créer un objet que nous modéliserons pour notre animation, j’ai choisi une balle car c’est simple, mais bien sûr vous êtes libre d’utiliser l’objet que vous souhaitez.

Ajoutez le code suivant à vos fichiers HTML et CSS :

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

.ball {
  background-color: burlywood;
  height: 50px;
  width: 50px;
  border: 1px solid black;
  border-radius: 50px;
  position: fixed;
  left: 10px;
  top: 300px;
}

Vous devriez obtenir quelque chose comme ceci :

Déplacer la balle le long de l’axe X

Nous voulons créer deux animations, une sur l’axe des x et une sur l’axe des y. L’animation de l’axe des x est une animation linéaire qui déplace la balle d’un point à l’autre.

• Ajoutez une image clé, nous l’appellerons x :

@keyframes x {
  to {
    left: 500px;
  }
}

• Ajoutez l’image clé à l’attribut d’animation dans la classe balle :

.ball {
  background-color: burlywood;
  height: 50px;
  width: 50px;
  border: 1px solid black;
  border-radius: 50px;
  position: fixed;
  left: 10px;
  top: 300px;
  animation: x 2s linear forwards;
}

Maintenant, la balle se déplace le long de l’axe x !

Déplacer la balle le long de l’axe Y

Pour l’animation le long de l’axe y, nous voulons que la balle suive une courbe. Le dernier point sur l’axe y est le même que le point initial. Cependant, pour que l’animation s’exécute, nous devrons faire une petite différence dans l’axe des ordonnées. Donc, dans notre cas, nous allons changer le top attribut de la classe balle de 300 à 299,5.

Remarquez comment nous diminué la valeur de l’attribut top ; cela fera bouger notre animation dans la direction normale (bas → haut → bas). Si nous augmentions à la place la valeur de l’attribut top à 300,5, cela jouerait l’animation dans la direction opposée :

@keyframes y {
  to {
    top: 299.5px;
  }
}

• Ajoutez les nouvelles images clés à la même animation dans la classe balle

animation: x 2s linear forwards, y 2s cubic-bezier(0, 500, 1, 500) forwards;

Ce sera l’animation résultante :

Mais pourquoi avons-nous choisi ces certaines valeurs de fonction de Bézier cubique ? découvrons-le!

🚨 ATTENTION : Maths en avant ! 🚨

Les mathématiques derrière le cubic-bezier Une fonction

Un cube de Bézier peut être défini à l’aide de la formule suivante :

$$P = (1-t)^3P_0 + 3(1-t)^2tP_1 +3(1-t)t^2P_2+t^3P_3$$

Nous voulons que notre courbe atteigne le pic à exactement 0,5 du temps. Pour ce faire, $P_1$ et $P_2$ doivent être à (0,x) et (1,x) respectivement. Si vous ne voulez pas que le pic soit à 0,5, vous devez modifier la position temporelle de $P_0$ et $P_1$. Pour l’instant, nous nous en tiendrons à la création de la courbe à la mi-temps de l’animation.

Maintenant, nous savons que :

$$P_0 = (0,0), P_1 = (0, X), P_2 = (1,X), P_3 = (1,1)$$

En substituant l’équation, nous pouvons obtenir deux équations distinctes, une pour chaque axe :

1. axe des abscisses :

$$X

.ball {
  background-color: burlywood;
  height: 50px;
  width: 50px;
  border: 1px solid black;
  border-radius: 50px;
  position: fixed;
  left: 10px;
  top: 300px;
}

Maintenant, nous devons construire le chemin des montagnes russes. Le chemin se compose de deux parties :

1. La partie coulissante
2. La partie boucle

La partie coulissante

La création de la partie sur laquelle la balle glisse peut être effectuée à l’aide de la fonction cubic-bezier ! L’animation est composée de 2 animations, l’une le long de l’axe des x et l’autre le long de l’axe des y. L’animation de l’axe des x est une animation linéaire normale le long de l’axe des x. Nous pouvons définir ses images clés comme suit :

@keyframes x {
  to {
    left: 500px;
  }
}

ajoutez-le à votre propriété d’animation dans la trajectoire de la balle, comme suit :

animation: x 4s linear forwards

L’animation de l’axe des ordonnées est celle où nous utiliserons la fonction cubique-bézier. Définissons d’abord les images clés de l’animation. Nous voulons que la différence entre le point de départ et le point d’arrivée soit si petite que la balle atteigne presque la même hauteur.

@keyframes y {
  to {
    top: 299.5px;
  }
}

Pensons maintenant à la fonction de Bézier cubique. Nous voulons que notre chemin se déplace lentement vers la droite d’abord, puis lorsqu’il glisse, il devrait aller plus vite.

• Se déplacer lentement vers la droite signifie que P1 sera le long de l’axe des x. Donc, nous savons qu’il est à (V, 0)
  • Nous devons choisir un V approprié qui fait que notre animation va lentement vers la droite mais pas trop pour qu’elle occupe tout l’espace. Dans ce cas, j’ai trouvé que 0,55 convient le mieux
• Pour obtenir l’effet de glissement, nous devons déplacer P2 vers le bas de l’axe y (valeur négative) donc P2=(X, -Y)
  • Y doit être une grande valeur. Dans ce cas, j’ai choisi Y=800
  • Pour obtenir X, nous savons que notre vitesse d’animation doit être plus rapide en glissant et plus lente en remontant. Ainsi, plus X est proche de zéro, plus l’animation sera raide au glissement. Dans ce cas, soit X = 0,8

Maintenant que vous avez votre fonction de Bézier cubique, ce sera cubic-bezier(0.55, 0, 0.2, -800).

Ajoutons des images clés à notre propriété animations :

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -800) forwards;

C’est la première partie de notre animation, donc le délai d’animation est nul. Nous devrions ajouter une propriété animation-delay car à partir de la prochaine animation, les animations commenceront à un moment différent de la première animation.

animation-delay: 0s, 0s;

Noter: Si vous n’êtes pas sûr des valeurs de la fonction cubique-bézier, vous pouvez consulter ce site où vous pouvez visualiser des cubes-béziers et avoir une idée de l’endroit où P0 et P1 devraient se trouver.

Ajout d’une animation le long de l’axe X

Avant de faire la boucle, la balle doit se déplacer le long de l’axe x pendant un court instant afin qu’il y ait de l’espace entre les deux animations. Alors, faisons ça !

@keyframes x2 {
  to {
    left: 600px;
  }
}

• Ajoutez-le à la propriété animation :

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -800) forwards, x2 0.5s linear forwards;

Cette animation devrait commencer après l’animation de glissement et l’animation de glissement prend quatre secondes, donc le délai d’animation sera de quatre secondes :

animation-delay: 0s, 0s, 4s;

Le résultat

La partie boucle

Pour créer un cercle (boucle) en CSS, nous devons déplacer le cercle au centre de la boucle et démarrer l’animation à partir de là. Nous voulons que le rayon du cercle soit de 100 pixels, nous allons donc changer la position du cercle en top: 200px (300 – rayon souhaité). Cependant, cela doit se produire une fois l’animation de glissement terminée. Nous allons donc créer une autre animation d’une durée de zéro seconde et ajouter le délai d’animation approprié.

@keyframes pointOfCircle {
  to {
    top: 200px;
  }
}

• Ajoutez ceci à la liste des animations avec une durée = 0s

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -800) forwards, x2 0.5s linear forwards,
    pointOfCircle 0s linear forwards;

• Ajoutez le délai d’animation qui sera de 4,5s

animation-delay: 0s, 0s, 4s, 4.5s;

La boucle elle-même

Pour créer une animation en boucle :

• Créez une image clé qui ramène la balle à son ancienne position, puis la fait pivoter :

@keyframes loop {
  from {
    transform: rotate(0deg) translateY(100px) rotate(0deg);
  }
  to {
    transform: rotate(-360deg) translateY(100px) rotate(-360deg);
  }
}

• Ajoutez les images clés de la boucle à la propriété animation :

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -800) forwards, x2 0.5s linear forwards,
    pointOfCircle 0s linear forwards, loop 3s linear forwards;

• Ajoutez le délai d’animation, qui sera également de 4,5 secondes ici :

animation-delay: 0s, 0s, 4s, 4.5s, 4.5s;

Déplacer la balle le long de l’axe X (encore)

Nous avons presque terminé ! Nous avons juste besoin de déplacer la balle après l’animation le long de l’axe des x afin que la balle ne s’arrête pas exactement après la boucle, comme c’est le cas dans l’image ci-dessus.

@keyframes x3 {
  to {
    left: 1000px;
  }
}

• Ajoutez les images clés à la propriété animation :

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -800) forwards, x2 0.5s linear forwards,
    pointOfCircle 0s linear forwards, loop 3s linear forwards,
    x3 2s linear forwards;

• En ajoutant le délai approprié, ici ce sera 7.5s :

animation-delay: 0s, 0s, 4s, 4.5s, 4.5s, 7.5s;

La sortie finale

Conclusion

Dans cet article, nous avons expliqué comment combiner plusieurs images clés pour créer un chemin d’animation complexe. Nous avons également couvert les cubes-béziers et comment les utiliser pour créer votre propre fonction d’accélération. Je recommanderais de continuer et de créer votre propre chemin d’animation pour vous salir les mains avec des animations. Si vous avez besoin d’aide ou souhaitez donner votre avis, vous êtes plus que bienvenu pour envoyer un message à l’un des liens ici. Passez une merveilleuse journée/soirée !

(il)