Que sont les transitions CSS et comment les utiliser

Publié: 2022-02-16

Dans un article précédent, vous avez appris les concepts de base des animations CSS et comment les utiliser. On pourrait dire que les transitions sont une forme simplifiée d'animation avec quelques différences entre elles, la forme de déclenchement de l'animation étant la plus pertinente.

Une autre différence est que les transitions n'ont que deux états (état initial et état final), alors que vous pouvez définir plusieurs états pour un élément animé avec la règle @keyframes . Les transitions sont déclenchées sur une action, par exemple lors du survol d'un élément, mais les animations peuvent se produire sans action spécifique, par exemple avec un délai d'animation après le chargement de la page.

Dans ce tutoriel, nous allons apprendre les concepts de base des transitions CSS avec un exemple pratique. De plus, vous apprendrez également à utiliser un sprite d'image avec CSS.

Commençons!

Étape 1. - La disposition proposée

Transitions CSS et comment les utiliser

Nous avons 4 cartes faisant la promotion des services réguliers d'une agence web. Lorsque vous les survolez, chacun des éléments à l'intérieur de la carte aura une transition différente pour obtenir l'effet souhaité.

Étape # 2. - Le HTML

  • Ouvrez votre éditeur de code préféré
  • Créez un fichier HTML appelé index.html
  • Copiez et collez ce code :
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>
OUVRIR DANS POPUP
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>

191125 transitions css 001

Le conteneur de cartes de service contient 4 cartes différentes. Chaque fiche est composée d'une icône, d'un titre, d'un texte et d'un lien vers l'information correspondante sur le site. Le texte et le lien seront affichés lors du survol de la carte, sinon ils seront masqués.

Étape 3. - Les styles CSS de base

  • Créez un fichier CSS et appelez-le style.css — dans le code HTML se trouve déjà un lien vers ce fichier et vers Google Fonts
  • Copiez et collez ces styles pour modifier les styles de typographie et la couleur d'arrière-plan des cartes :
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }
OUVRIR DANS POPUP
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }

191125 transitions css 002

Étape 4. - Les styles de mise en page

Utilisons CSS Grid pour créer les cartes et les disposer horizontalement.

  • Modifiez le code CSS :
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

Le conteneur de la carte de service est une grille horizontale à 4 colonnes. Chaque carte a également été déclarée comme conteneur de grille à 2 lignes. Notez que nous avons déclaré une hauteur fixe pour chaque carte.

191125 transitions css 003

Étape #5. - Le lutin d'image

Selon W3Schools, un sprite d'image est une collection d'images placées dans une seule image. Vous économisez de la bande passante puisque la page n'aura pas besoin de faire une demande de serveur pour chaque image qu'elle doit charger. Il demandera l'image une fois, puis vous mapperez la partie requise de l'image dans le code CSS.

191125 transitions css 004

L'image mesure 240 pixels de large et 480 pixels de haut. Chacune des icônes couvre une zone de 120x120px. Pour mapper chacune des images, nous commençons par le coin supérieur gauche de l'image avec les coordonnées (0px 0px) — en suivant l'ordre 'gauche - haut'.

De cette façon, les images de la colonne de gauche du sprite sont situées à :

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

Ce sont les images à utiliser avant le survol.

Les images sur la colonne de droite du sprite sont situées à :

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • Modifiez le code CSS :
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }
OUVRIR DANS POPUP
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

Le conteneur de la carte de service est une grille horizontale à 4 colonnes. Chaque carte a également été déclarée comme conteneur de grille à 2 lignes. Notez que nous avons déclaré une hauteur fixe pour chaque carte.

191125 transitions css 003

Étape #5. - Le lutin d'image

Selon W3Schools, un sprite d'image est une collection d'images placées dans une seule image. Vous économisez de la bande passante puisque la page n'aura pas besoin de faire une demande de serveur pour chaque image qu'elle doit charger. Il demandera l'image une fois, puis vous mapperez la partie requise de l'image dans le code CSS.

191125 transitions css 004

L'image mesure 240 pixels de large et 480 pixels de haut. Chacune des icônes couvre une zone de 120x120px. Pour mapper chacune des images, nous commençons par le coin supérieur gauche de l'image avec les coordonnées (0px 0px) — en suivant l'ordre 'gauche - haut'.

De cette façon, les images de la colonne de gauche du sprite sont situées à :

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

Ce sont les images à utiliser avant le survol.

Les images sur la colonne de droite du sprite sont situées à :

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • Modifiez le code CSS :
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }

191125 transitions css 005

Pas mal, non ? Ajoutons une touche cosmétique pour terminer cette partie avec un peu de rembourrage.

  • Modifiez le code CSS :
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }
OUVRIR DANS POPUP
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }

191125 transitions css 006

Étape #6. - Les transitions CSS

La propriété de transition CSS a 4 propriétés enfants différentes :

  • transition-property (la propriété de l'élément, à laquelle la transition sera appliquée)
  • durée de transition
  • fonction de synchronisation de transition
  • délai de transition

La sténographie est :

transition : [transition-property] [transition-duration] [transition-timing-function] [transition-delay]

  • Modifiez le code CSS :
 /* TRANSITIONS */

 .service-card {
 transition: margin-top 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
 }

 .service-card:hover {
 margin-top: -5em;
 height: 25em;
 background: #006e9c;
 }


Comme vous pouvez le constater, il est possible d'appliquer plusieurs transitions à différentes propriétés d'éléments, en les séparant par une virgule. Aucune de ces transitions n'a de retard.

Pour faire rouler la carte vers le haut, vous définissez une marge négative en haut et ajoutez la valeur absolue de cette marge à la hauteur de l'élément (320px == 20em).

191125 transitions css 008

Il est temps maintenant de cibler les images et de les faire changer avec une transition.

  • Modifiez le code CSS :
 .icon-strategy,
 .icon-ui-ux-design,
 .icon-development,
 .icon-digital-marketing {
   transition: background 0.4s step-end;
 }

 .service-card:hover .icon-strategy {
   background: url(./sprite.png) 120px 0;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-ui-ux-design {
   background: url(./sprite.png) 120px -120px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-development {
   background: url(./sprite.png) 120px -240px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-digital-marketing {
   background: url(./sprite.png) 120px -360px;
   width: 120px;
   height: 120px;
 }

Encore une fois:

  • propriété de transition : arrière-plan
  • durée de transition : 0,4 s
  • fonction de synchronisation de transition : étape de fin

Le reste est simplement mappé à la coordonnée exacte (détaillée ci-dessus) sur le sprite de l'image.

191125 transitions css 009

Enfin, ciblons le conteneur .hidden .

  • Modifiez le code CSS :
 .hidden,
 .hidden a {
 transition: color 0.4s ease-out 0.2s;
 }

 .service-card:hover .hidden {
 height: auto;
 }
 .service-card:hover .hidden,
 .service-card:hover .hidden a {
 color: white;
 }

Il y a deux détails ici à prendre en compte :

  • La transition sur la couleur du texte a un délai de transition de 0,2 s
  • La propriété de hauteur de l'élément change au survol sans transition 
191125 transitions css 010

Les transitions sont prises en charge par tous les principaux navigateurs.

191125 transitions css 011

J'espère que cet exercice vous a plu. Merci d'avoir lu!

Le code peut être trouvé ici.