Pour cet exercice, vous devrez animer l’ancien rival et maintenant meilleur ami de Sonic: Knuckles!
Aperçu du résultat 👇
Matériel
Pen de départ
Médias
Sprite sheet de Knuckles
Vous n’avez qu’à ajouter du CSS (Nul besoin de modifier le HTML ou le JS).
Requis
Chaque frame de la sprite sheet de Knuckles à une dimension de 252x222px. Faites en sorte que l'élément .sprite affiche en background-image le premier frame de cette sprite sheet.
Animer la sprite sheet de sorte que Knuckles donne l'impression de courir sur place. L'animation devrait s'effectuer en l'espace de 1 seconde ⏱.
Animer l'élément .knuckles pour qu'il apparaisse au milieu à gauche de l'écran et sorte au milieu à droite de celle-ci. Créant ainsi l'illusion qu'il cours de gauche à droite sur la plateforme plutôt que sur place. Cette deuxième animation devrait s'effectuer en 4 secondes.
Notes de cours 📚
Animation
@keyframes, animation-name, animation-duration, etc.