Pour cet exercice nous allons animer le déplacement d’un fantôme 👻.
Aperçu du résultat 👇
Matériel
Pen de départ
Vous n’avez qu’à ajouter du CSS (nul besoin de modifier le HTML ou le JavaScript).
Requis
Faites en sorte que le fantôme donne l'impression de flotter sur place en le déplaçant de haut en bas ↕️ sur une distance de 20px en l'espace d'une seconde.
Ajoutez une 2e animation sur une 2e balise HTML faisant traverser horizontalement l'écran au fantôme ↔️. Ce dernier doit commencer à l'extérieur gauche de la fenêtre et la quitter par la droite en l'espace de 20 secondes. Le fantôme doit toujours se déplacer à vitesse constante et l'animation doit jouer en boucle.
Gardez une copie de cet exercice sur CodePen, puisque nous y reviendrons plus tard lors d’une 2e partie.
Notes de cours 📚
Animation
@keyframes, animation-name, animation-duration, etc.