Créer des séquences animées avec CSS

Introduction

Dans ce projet, vous allez apprendre à créer une séquence animée à l'aide de CSS. Le projet est basé sur l'histoire d'un groupe de disciples qui partent à la recherche des Écritures bouddhiques dans l'Ouest céleste. Cependant, ils sont immobilisés en chemin par des démons, et un personnage nommé Tom utilise CSS pour les sauver, permettant ainsi aux disciples de poursuivre leur voyage vers l'Ouest.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer les trames d'animation pour les personnages de la scène
Comment définir les clés d'animation pour chaque personnage pour créer l'illusion de mouvement
Comment faire en sorte que les animations bouclent indéfiniment pour créer une animation continue et sans faille

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Utiliser les animations CSS pour créer des effets visuels dynamiques et captivants
Coordonner plusieurs animations pour créer une séquence d'animation cohérente et synchronisée
Optimiser les animations pour la performance et la réactivité

Configure la structure du projet

Pour commencer, ouvrez l'environnement d'expérience, et la structure de répertoire est la suivante :

├── css
│   └── style.css
├── images
│   ├── background.webp
│   ├── west_01.png
│   ├── west_02.png
│   ├── west_03.png
│   └── west_04.png
└── index.html

Où :

index.html est la page principale.
images est le dossier d'images.
css est le dossier CSS.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Lorsque vous prévisualisez la page index.html dans le navigateur, vous remarquerez que l'animation ne se joue qu'une fois puis s'arrête. L'effet de page est le suivant :

Configure les trames d'animation

Dans cette étape, vous allez apprendre à configurer les trames d'animation pour les personnages du projet "Voyage vers l'Ouest céleste".

Ouvrez le fichier css/style.css dans l'éditeur de code et vous pouvez voir que a1, a2, a3, a4 sont les quatre règles @keyframes qui ont été données, et que la règle @keyframes définit la séquence d'animation. Ces clés d'animation définissent l'animation pour chaque personnage, déplacant l'image d'arrière-plan horizontalement pour créer l'illusion de mouvement.
Dans la règle .actor:first-child, modifiez le code pour animer le premier personnage :

animation:
  a1 0,
  8s steps(8) infinite;

Cela fera en sorte que l'animation du premier personnage boucle indéfiniment, chaque trame durant 0,8 secondes et l'animation ayant 8 étapes. 3. Dans la règle .actor:nth-child(2), modifiez le code pour animer le second personnage :

animation:
  a2 0,
  8s steps(8) infinite;

Cela fera en sorte que l'animation du second personnage boucle indéfiniment, chaque trame durant 0,8 secondes et l'animation ayant 8 étapes. 4. Dans la règle .actor:nth-child(3), modifiez le code pour animer le troisième personnage :

animation:
  a3 0,
  8s steps(8) infinite;

Cela fera en sorte que l'animation du troisième personnage boucle indéfiniment, chaque trame durant 0,8 secondes et l'animation ayant 8 étapes. 5. Dans la règle .actor:last-child, modifiez le code pour animer le quatrième personnage :

animation:
  a4 0,
  8s steps(8) infinite;

Cela fera en sorte que l'animation du quatrième personnage boucle indéfiniment, chaque trame durant 0,8 secondes et l'animation ayant 8 étapes. 6. Enregistrez le fichier style.css.

Maintenant, lorsque vous prévisualisez le fichier index.html dans le navigateur, vous devriez voir les animations des personnages boucler indéfiniment.