Animation de zoom avant et arrière : Maîtrise des bases de CSS

Introduction

Dans ce laboratoire (lab), nous allons explorer les animations CSS en créant un effet de zoom avant et de zoom arrière simple mais efficace. Les animations CSS nous permettent d'ajouter des effets visuels dynamiques aux pages web sans utiliser JavaScript. À la fin de ce laboratoire, vous comprendrez comment utiliser les keyframes CSS et les propriétés d'animation pour créer des transitions fluides qui peuvent améliorer l'expérience utilisateur sur vos sites web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau intermédiaire avec un taux de réussite de 75%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Comprendre la structure HTML

Avant de commencer à créer notre animation, nous devons comprendre la structure HTML avec laquelle nous allons travailler. Dans cette étape, nous examinerons le fichier HTML fourni et apporterons les modifications nécessaires.

Ouvrez le fichier index.html dans l'éditeur.
Si le fichier est vide ou manquant, créez - le avec le contenu suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zoom In Zoom Out Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>CSS Animation Demo</h1>
    <p>This box demonstrates a zoom in zoom out animation:</p>

    <div class="zoom-in-out-box"></div>
  </body>
</html>

Comprenons ce que fait ce HTML :
- Nous avons une structure de document HTML standard avec un titre et des paramètres de vue (viewport)
- Nous établissons un lien vers un fichier CSS externe nommé style.css
- Nous incluons un en - tête et un paragraphe pour expliquer notre démonstration
- Plus important encore, nous avons un élément <div> avec la classe zoom - in - out - box qui sera animé
Enregistrez le fichier index.html si vous avez apporté des modifications.

Cet élément div sera notre toile de fond pour créer l'animation. Dans l'étape suivante, nous allons styliser cet élément à l'aide de CSS.

Stylage CSS de base

Maintenant que nous avons notre structure HTML en place, créons le stylage CSS de base pour notre élément d'animation.

Ouvrez le fichier style.css dans l'éditeur.
Si le fichier est vide ou manquant, créez - le avec le contenu suivant :

body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #333;
}

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
}

Comprenons ce que fait ce CSS :
- Nous définissons un stylage de base pour la page (police, largeur et marges)
- Nous stylisons l'en - tête avec une couleur gris foncé
- Pour notre élément d'animation .zoom - in - out - box, nous :
  - Ajoutons une marge de 24px autour de lui
  - Fixons sa largeur et sa hauteur à 50px
  - Lui donnons une couleur de fond rose vif
Enregistrez le fichier style.css après avoir apporté ces modifications.
Pour voir votre progression, cliquez sur le bouton "Go Live" dans le coin inférieur droit de VSCode. Cela démarrera un serveur web sur le port 8080. Ensuite, rafraîchissez l'onglet Web 8080 pour voir votre boîte stylisée.

Vous devriez maintenant voir un petit carré rose sur votre page web. Ce carré est l'élément que nous allons animer dans les étapes suivantes.

Création de l'animation avec des keyframes

Les animations CSS fonctionnent en définissant des keyframes (images clés) qui spécifient les styles qu'un élément doit avoir à différents moments de la séquence d'animation. Créons les keyframes pour notre animation de zoom avant et zoom arrière.

Rouvrez le fichier style.css et ajoutez le code suivant à la fin :

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

Comprenons ce que fait ce code :
- @keyframes est une règle @ CSS qui définit les étapes et les styles d'une animation
- zoom-in-zoom-out est le nom que nous donnons à notre animation (nous ferons référence à ce nom plus tard)
- À l'intérieur des keyframes, nous définissons ce qui se passe à différents moments de l'animation :
  - À 0% (le début), l'élément est à sa taille normale avec scale(1, 1)
  - À 50% (au milieu), l'élément grossit jusqu'à 1,5 fois sa taille avec scale(1.5, 1.5)
  - À 100% (la fin), l'élément revient à sa taille normale
- La propriété transform avec la fonction scale() modifie la taille de l'élément
Enregistrez le fichier style.css après avoir ajouté ces keyframes.

Les keyframes définissent ce que fera notre animation, mais nous ne l'avons pas encore appliquée à notre élément. Dans l'étape suivante, nous allons connecter l'animation à notre boîte.

Application de l'animation

Maintenant que nous avons défini nos keyframes (images clés), nous devons appliquer l'animation à notre élément boîte.

Rouvrez le fichier style.css et modifiez le sélecteur .zoom-in-out-box comme suit :

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 1s ease infinite;
}

Comprenons la propriété d'animation que nous avons ajoutée :
- animation est une propriété raccourcie qui définit plusieurs propriétés d'animation à la fois
- zoom-in-zoom-out est le nom de notre animation avec des keyframes
- 1s spécifie que un cycle de l'animation dure 1 seconde
- ease est la fonction de temporisation qui fait démarrer l'animation lentement, l'accélérer, puis la ralentir à nouveau
- infinite signifie que l'animation se répétera indéfiniment
Enregistrez le fichier style.css après avoir apporté ces modifications.
Si le serveur web est déjà en cours d'exécution, rafraîchissez simplement l'onglet Web 8080. Sinon, cliquez sur "Go Live" dans le coin inférieur droit pour démarrer le serveur, puis ouvrez l'onglet Web 8080.

Vous devriez maintenant voir votre carré rose zoomer en avant et en arrière de manière fluide dans une animation continue. Le carré grossit jusqu'à atteindre 1,5 fois sa taille d'origine, puis rétrécit pour revenir à la normale. Ce cycle se répète indéfiniment.

Expérimentation avec les propriétés d'animation

Personnalisons notre animation en expérimentant avec différentes propriétés d'animation. Cela vous aidera à comprendre comment ces propriétés influencent le comportement de l'animation.

Ouvrez le fichier style.css et modifiez le sélecteur .zoom-in-out-box pour tester différentes propriétés d'animation :

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 2s ease-in-out infinite;
  /* Ajoute une légère rotation pendant l'animation */
  border-radius: 10px;
}

Comprenons ce que nous avons modifié :
- Nous avons étendu la durée de l'animation à 2s (2 secondes)
- Nous avons changé la fonction de temporisation en ease-in-out, ce qui rend le début et la fin de l'animation fluides
- Nous avons ajouté un border-radius de 10px pour arrondir les coins de notre boîte
Modifions également nos keyframes (images clés) pour ajouter un effet de rotation :

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1) rotate(0deg);
  }
  50% {
    transform: scale(1.5, 1.5) rotate(45deg);
    background-color: #2196f3;
  }
  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}

Dans cette définition mise à jour des keyframes :
- Nous avons ajouté une fonction rotate() à la propriété transform
- À 50 %, l'élément tourne maintenant de 45 degrés tout en grossissant
- Nous avons également changé la couleur de fond en bleu à 50 %
Enregistrez le fichier style.css après avoir apporté ces modifications.
Rafraîchissez l'onglet Web 8080 pour voir votre animation améliorée.

Votre animation devrait maintenant être plus lente (2 secondes par cycle), avoir des coins arrondis, tourner pendant le zoom et changer de couleur à mi-chemin de l'animation. Cela démontre comment les animations CSS peuvent combiner plusieurs changements de propriétés pour des effets visuels riches.

N'hésitez pas à expérimenter davantage avec différentes propriétés et valeurs pour voir comment elles influencent votre animation.

Résumé

Félicitations pour avoir terminé le laboratoire (lab) sur l'animation de zoom avant et arrière ! Dans ce laboratoire, vous avez appris :

Comment structurer le HTML pour une animation CSS
Comment styliser des éléments en utilisant les propriétés CSS de base
Comment créer des animations avec des keyframes (images clés) qui définissent les étapes d'une animation
Comment appliquer des animations aux éléments en utilisant la propriété animation
Comment personnaliser les animations en ajustant le timing (temporisation), l'easing (fonction de temporisation) et en combinant plusieurs changements de propriétés

Ces techniques d'animation CSS peuvent être appliquées pour créer des interfaces utilisateur attrayantes qui répondent aux interactions des utilisateurs ou attirent l'attention sur des éléments importants de vos pages web.

Pour poursuivre votre parcours d'apprentissage, envisagez d'explorer d'autres propriétés d'animation telles que animation-delay, animation-direction et animation-fill-mode. Vous pouvez également expérimenter l'animation de différentes propriétés CSS autres que transform, telles que l'opacité, la position et la taille.