Créer des transitions CSS3 avec des fonctions de temporisation

Introduction

Dans ce laboratoire, les participants exploreront le puissant monde des transitions CSS3, en apprenant à créer des effets visuels dynamiques et fluides à l'aide de fonctions de temporisation et de propriétés de transition. Le laboratoire propose une approche pratique et complète pour comprendre comment implémenter et manipuler les transitions CSS, en commençant par la configuration d'un projet HTML et CSS de base jusqu'à l'expérimentation d'animations de transition avancées.

Les participants commenceront par créer une structure de projet avec des fichiers HTML et CSS, puis apprendront progressivement à appliquer des effets de survol, à comprendre la syntaxe des transitions et à explorer diverses fonctions de temporisation. Grâce à des exercices pratiques, les apprenants acqueront les compétences nécessaires pour contrôler les transformations d'éléments, créer des interfaces utilisateur interactives et ajouter des interactions visuelles sophistiquées à des designs web en utilisant les techniques de transition CSS3.

Configurer le projet HTML et la mise en forme de base

Dans cette étape, vous allez configurer un projet HTML et CSS de base pour explorer les transitions CSS3. Nous allons créer une structure de projet simple et ajouter une mise en forme initiale pour préparer nos effets de transition.

Tout d'abord, accédez au répertoire du projet :

cd ~/projet

Créez un nouveau répertoire pour notre projet de transitions CSS :

mkdir transitions-css
cd transitions-css

Maintenant, créons les fichiers du projet à l'aide de l'IDE Web. Créez un fichier index.html :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Transitions CSS3</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="box">Survolez-moi</div>
    </div>
  </body>
</html>

Ensuite, créez un fichier styles.css avec une mise en forme de base :

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.container {
  text-align: center;
}

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
}

Vérifions que les fichiers ont été créés correctement :

ls

Sortie exemple :

index.html  styles.css

Cette configuration fournit une base de départ pour notre projet de transitions CSS. Nous avons créé une structure HTML simple avec un div que nous utiliserons pour démontrer divers effets de transition. La CSS fournit une mise en forme initiale pour rendre notre élément visuellement attrayant et centré sur la page.

Mettre en œuvre une transition de base sur l'effet de survol

Dans cette étape, vous allez apprendre à créer un effet de transition CSS de base lorsqu'on survole un élément. Les transitions CSS vous permettent de modifier les valeurs de propriété de manière fluide sur une durée spécifiée.

Ouvrez le fichier styles.css dans l'IDE Web et modifiez la classe .box pour ajouter une transition de survol :

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;

  /* Ajoutez la propriété de transition */
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: #2980b9;
}

Analysons les propriétés de transition :

transition: background-color 0.5s ease;
- background-color : La propriété à animer
- 0.5s : Durée de la transition (une demi-seconde)
- ease : Fonction de temporisation (démarrage et fin doux)

Maintenant, ajoutons une transition d'échelle pour rendre l'effet plus intéressant :

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;

  /* Plusieurs propriétés de transition */
  transition:
    background-color 0.5s ease,
    transform 0.3s ease;
}

.box:hover {
  background-color: #2980b9;
  transform: scale(1.1);
}

Enregistrez le fichier et ouvrez index.html dans un navigateur web. Lorsque vous survolez la boîte, vous verrez :

La couleur de fond change doucement
La boîte augmente légèrement de taille
La transition se produit de manière fluide sur la durée spécifiée

Exemple de ce que vous verrez :

Avant le survol : Boîte bleue de taille normale
Lors du survol : Boîte bleue un peu plus foncée, un peu plus grande
La transition est douce et progressive

Explorer les propriétés et la syntaxe des transitions

Dans cette étape, vous plongerez plus profondément dans les propriétés de transition CSS et découvrirez la syntaxe complète pour créer des transitions plus complexes et précises.

Mettez à jour le fichier styles.css pour explorer différentes propriétés de transition :

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 20px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;

  /* Syntaxe complète de la transition */
  transition-property: background-color, transform, border-radius;
  transition-duration: 0.5s, 0.3s, 0.4s;
  transition-timing-function: ease-in-out, linear, ease;
  transition-delay: 0s, 0.1s, 0s;
}

.box:hover {
  background-color: #2980b9;
  transform: scale(1.2) rotate(15deg);
  border-radius: 50%;
}

Analysons les propriétés de transition :

transition-property : Spécifie les propriétés CSS à animer
- Peut être plusieurs propriétés séparées par des virgules
- all peut être utilisé pour animer toutes les propriétés modifiables
transition-duration : Fixe la durée de la transition
- Peut avoir des durées différentes pour différentes propriétés
- Spécifiée en secondes (s) ou en millisecondes (ms)
transition-timing-function : Contrôle la courbe de vitesse de la transition
- linear : Vitesse constante
- ease-in : Démarre lentement, s'accélère
- ease-out : Démarre rapidement, ralentit
- ease-in-out : Démarrage et fin lents
transition-delay : Ajoute un délai avant le début de la transition
- Utile pour créer des effets séquentiels ou étalés

Alternativement, vous pouvez utiliser la propriété raccourcie transition :

.box {
  transition:
    background-color 0.5s ease-in-out,
    transform 0.3s linear 0.1s,
    border-radius 0.4s ease;
}

Mettez à jour index.html pour inclure plusieurs boîtes à des fins de démonstration :

<body>
  <div class="container">
    <div class="box">Boîte 1</div>
    <div class="box">Boîte 2</div>
    <div class="box">Boîte 3</div>
  </div>
</body>

Lorsque vous survolez les boîtes, vous verrez :

Différentes propriétés de transition
Différentes temporisations et délais
Plusieurs transformations se produisant simultanément

Expérimenter avec différentes fonctions de temporisation

Dans cette étape, vous allez explorer diverses fonctions de temporisation CSS qui contrôlent la vitesse et l'accélération des transitions. Les fonctions de temporisation définissent comment les valeurs intermédiaires sont calculées pendant une transition.

Mettez à jour index.html pour inclure plusieurs boîtes afin de démontrer différentes fonctions de temporisation :

<body>
  <div class="container">
    <div class="box linear">Linéaire</div>
    <div class="box ease">Facile</div>
    <div class="box ease-in">Entrer doucement</div>
    <div class="box ease-out">Sortir doucement</div>
    <div class="box ease-in-out">Entrer et sortir doucement</div>
  </div>
</body>

Modifiez styles.css pour montrer différentes fonctions de temporisation :

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 20px;
  flex-wrap: wrap;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* Fonction de temporisation linéaire */
.linear {
  transition: transform 2s linear;
}
.linear:hover {
  transform: translateX(200px);
}

/* Fonction de temporisation Facile (par défaut) */
.ease {
  transition: transform 2s ease;
}
.ease:hover {
  transform: translateX(200px);
}

/* Fonction de temporisation Entrer doucement */
.ease-in {
  transition: transform 2s ease-in;
}
.ease-in:hover {
  transform: translateX(200px);
}

/* Fonction de temporisation Sortir doucement */
.ease-out {
  transition: transform 2s ease-out;
}
.ease-out:hover {
  transform: translateX(200px);
}

/* Fonction de temporisation Entrer et sortir doucement */
.ease-in-out {
  transition: transform 2s ease-in-out;
}
.ease-in-out:hover {
  transform: translateX(200px);
}

Caractéristiques des fonctions de temporisation :

linear : Vitesse constante du début à la fin
ease : Démarrage lent, rapide au milieu, fin lente (par défaut)
ease-in : Démarre lentement, s'accélère vers la fin
ease-out : Démarre rapidement, ralentit vers la fin
ease-in-out : Démarrage et fin lents, plus rapide au milieu

Vous pouvez également utiliser des fonctions cubic-bezier personnalisées pour un contrôle plus précis :

.custom-timing {
  transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

Lorsque vous survolez chaque boîte, vous observerez différents modèles de mouvement en fonction de leurs fonctions de temporisation.

Créer une animation de transition avancée

Dans cette étape, vous allez créer une animation de transition plus complexe qui combine plusieurs propriétés et démontre des techniques avancées de transition CSS.

Mettez à jour index.html pour inclure un élément plus interactif :

<body>
  <div class="container">
    <div class="card">
      <div class="card-front">Survolez-moi</div>
      <div class="card-back">Transition avancée!</div>
    </div>
  </div>
</body>

Modifiez styles.css pour créer une carte retournable avec des transitions avancées :

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

.card {
  width: 300px;
  height: 200px;
  position: relative;
  perspective: 1000px;
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  transition:
    transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
    background-color 0.5s ease,
    box-shadow 0.5s ease;
}

.card-front {
  background-color: #3498db;
  color: white;
  transform: rotateY(0deg);
}

.card-back {
  background-color: #2ecc71;
  color: white;
  transform: rotateY(180deg);
}

.card:hover.card-front {
  transform: rotateY(180deg);
  background-color: #2980b9;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card:hover.card-back {
  transform: rotateY(0deg);
  background-color: #27ae60;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

Principales techniques de transition avancées :

Rotation 3D avec rotateY
perspective pour l'effet 3D
backface-visibility pour cacher l'arrière des éléments
Plusieurs propriétés en transition
Fonction de temporisation cubic-bezier personnalisée
Transformations à l'état de survol
Transitions de couleur et d'ombre

L'animation démontre :

Un retournement de carte 3D fluide
Un changement de couleur au survol
Effet d'ombre
Temporisation complexe et transitions de plusieurs propriétés

Lorsque vous survolez la carte :

Le côté avant tourne et change de couleur
Le côté arrière devient visible
Transition lisse et multi-propriété

Résumé

Dans ce laboratoire, les participants apprennent à créer des transitions dynamiques CSS3 en construisant un projet web complet axé sur les techniques de conception interactive. Le laboratoire commence par la configuration d'un environnement HTML et CSS structuré, en créant un projet de base avec un élément div centré stylé avec des propriétés de base telles que la couleur d'arrière-plan, le rayon de bordure et la disposition en boîte flexible (flexbox).

Le parcours d'apprentissage progresse en mettant en œuvre des effets de survol, en explorant les propriétés et la syntaxe des transitions, et en expérimentant diverses fonctions de temporisation pour créer des animations fluides et attrayantes. En développant systématiquement un projet de transitions CSS, les participants acquièrent des compétences pratiques dans la manipulation des propriétés d'éléments, la compréhension des mécanismes de transition et la création d'interactions web visuellement attrayantes qui améliorent l'expérience utilisateur grâce à des techniques de conception subtile et réactive.