Transitions en CSS pas à pas [CSS07]

Cette série d’exercice est un entrainement pour manipuler les transitions en CSS.

Avant de commencer l’exercice

Pour cet exercice, vous allez travailler dans un seul fichier HTML avec une feuille de style externe. Le fait de travailler avec plusieurs animations sur un seul fichier CSS implique de la rigueur sur les noms des classes.

Pensez à bien observer le résultat dans un navigateur à chaque modification !

Consignes des exercices

Préparation des fichiers de l’exercice

HTML : Construisez une page HTML de base.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
    </head>
    <body>

    </body>
</html>

HTML : Créez une feuille de style et liez-la à la page HTML.

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire afin qu’elle corresponde à l’emplacement et au nom du fichier CSS.

<link  rel="stylesheet" type="text/css" href="style.css">

CSS : Personnalisez la police de caractère du texte par défaut.

body {
    font-family: arial;
}

Exercice 1 : transitions sur un carré

HTML : Insérez les éléments suivants dans votre page HTML :

Un titre de niveau 1 avec le texte : Exercice 1 ;
Un élément <div> avec la classe forme-carre .

<h1>Exercices 1</h1>
<div class="forme-carre"></div>

CSS : Adaptez les propriétés de la classe forme-carre pour obtenir un carré coloré de 100 pixels de côté.

Carré de base — Carré coloré de 100 pixels de côté

.forme-carre {
    height: 100px;
    width: 100px;
    background-color: #03C4EB;
}

HTML : Ajoutez une seconde classe CSS à l’élément <div> que vous nommerez transition-1.

Cette méthode qui consiste à utiliser plusieurs classes permet d’avoir des classes génériques et des classes spécifiques. Nous allons ainsi pouvoir créer autant de carrés que l’on souhaite avec la classe forme-carre et leur appliquer des transitions différentes avec des classes transition-1, transition-2, etc.

<h1>Exercices 1</h1>
<div class="forme-carre transition-1"></div>

CSS : En utilisant la classe transition-1 et la pseudo-classe hover, ajoutez un effet de changement de couleur lorsque l’on survole le carré avec la souris.

Effet de changement de couleur au survol — Changement de couleur au survol

.transition-1:hover {
    background-color: #FFDD40;
}

CSS : En utilisant la classe transition-1, ajoutez un effet de transition lors du survol du carré avec les critères suivants :

Durée de la transition : 2 secondes.

.transition-1 {
  transition-property: background-color ;
  transition-duration: 3s;
}
.transition-1:hover {
  background-color: #FFDD40;
}

HTML : Dupliquez l’élément <div> du carré et attribuez à la copie la classe transition-2 à la place de transition-1.

<h1>Exercices 1</h1>
<div class="forme-carre transition-1"></div>
<div class="forme-carre transition-2"></div>

CSS : En utilisant la classe transition-2, ajoutez une bordure épaisse lorsque l’on survole le carré avec la souris.

Ajout d'une bordure — Ajout d’une bordure

.transition-2:hover {
    border: 10px solid #FFDD40;
}

CSS : Ajoutez la propriété box-sizing avec la valeur border-box pour que la bordure fasse partie des 100 pixels de votre carré.

.forme-carre {
  height: 100px;
  width: 100px;
  background-color: #03c4eb;
  box-sizing: border-box;
}

CSS : En utilisant la classe transition-2, ajoutez un effet de transition lors du survol du carré avec les critères suivants :

Durée de la transition : 2 secondes ;
Délai avant le début de la transition : 0,5 seconde ;
Rythme de transition : régulier (linéaire).

.transition-2 {
  transition-property: border;
  transition-duration: 2s;
  transition-delay: 0.5s;
  transition-timing-function: linear;
}
.transition-2:hover {
  border: 10px solid #ffdd40;
}

HTML : Dupliquez l’élément <div> du carré et attribuez à la copie la classe transition-3.

<h1>Exercices 1</h1>
<div class="forme-carre transition-1"></div>
<div class="forme-carre transition-2"></div>
<div class="forme-carre transition-3"></div>

CSS : En utilisant la classe transition-3, reproduisez l’effet de transition illustré par l’image ci-dessous. La transformation du carré en cercle s’effectue avec la propriété CSS qui permet d’arrondir les bordures…

.transition-3 {
  transition-property: all;
  transition-duration: 2s;
}
.transition-3:hover {
  border-radius: 50%;
  background-color: #ffdd40;
}

Exercice 2 : transitions sur un bouton

HTML : Insérez les éléments suivants dans votre page HTML :

Un titre de niveau 1 avec le texte : Exercice 2 ;
Un lien hypertexte sur le texte Bouton avec la classe btn.

<h1>Exercices 2</h1>
<a class="btn" href="#">Bouton</a>

CSS : En utilisant la classe btn, mettez en forme le lien hypertexte afin qu’il ressemble au modèle ci-dessous :

Modèle de bouton

background-color
border
border-radius
padding
margin
color
text-decoration

.btn {
  background-color: #03c4eb;
  border: 1px solid #025f72;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  margin: 0 0.2rem; /* utile uniquement si le lien est au milieu d'un texte */
  color: #025f72;
  text-decoration: none;
}

HTML : Ajoutez une seconde classe CSS au lien que vous nommerez btn-1.

<a class="btn" href="#">Bouton</a>

CSS : En utilisant la classe btn et la pseudo-classe adaptée, modifiez toutes les couleurs du lien au survol de la souris.

Effet de survol sur le lien

.btn:hover {
  background-color: #ffdd40;
  border-color: #897722;
  color: #897722;
}

CSS : En utilisant la classe btn, ajoutez un effet de transition lors du survol du lien avec les critères suivants :

Durée : 0,5 seconde.

Transition sur le lien

.btn {
  background-color: #03c4eb;
  border: 1px solid #025f72;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  margin: 0 0.2rem;
  color: #025f72;
  text-decoration: none;
  transition-property: all;
  transition-duration: 0.5s;
}

CSS : En utilisant la classe btn et la pseudo-classe active, ajoutez un effet lorsque l’on clique sur le lien avec la souris.

Animation sur l’état actif du lien

.btn:active {
  background-color: #ef2fb2;
  border-color: #751a58;
  color: #751a58;
}

Exercice 3 : call to action glissant

HTML : Copiez et collez le code ci-dessous dans votre page web.

Ce code va correspondre un cadre composé de deux éléments de contenu que nous allons animer.

<h1>Exercices 3</h1>
<div class="call">
  <div class="call-content call-content-1">Survolez-moi</div>
  <div class="call-content call-content-2">Cliquez-moi</div>
</div>

CSS : Utilisez la classe call pour dimensionner le conteneur et en faire un carré de 200 pixels de côté. Ajoutez-lui également une bordure.

.call {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}

CSS : Utilisez la classe call-content-1 et call-content-2 pour appliquer des couleurs d’arrière-plan différentes aux deux blocs de contenu.

.call-content-1 {
  background-color: #03c4eb;
}
.call-content-2 {
  background-color: #ffdd40;
}

CSS : Utilisez la classe call-content pour appliquer les mêmes dimensions aux deux blocs de contenu que celle que vous avez appliquées au conteneur global.

Les deux blocs de contenu ont une hauteur cumulée supérieure à celle du bloc de conteneur global, ils vont donc déborder. Vous pouvez observer le débordement grâce à la bordure.

.call-content {
  width: 200px;
  height: 200px;
}

CSS : Utilisez la classe call-content pour positionner les deux blocs de contenu en absolu et la classe call pour positionner le conteneur en relatif.

.call {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
.call-content {
  position: absolute;
  width: 200px;
  height: 200px;
}

CSS : Utilisez la classe call-content-2 pour positionner le second conteneur à côté du premier.
Rappelez-vous que vous avez affaire à des carrés de 200 pixels.

.call-content-2 {
  background-color: #ffdd40;
  left: 200px;
}

CSS : Le second contenu déborde du conteneur principal. Utilisez la propriété overflow sur le conteneur principal pour masquer tout ce qui dépasse.

.call {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
}

CSS : Utilisez les classes call et call-content-2 ainsi que la pseudo classe hover pour repositionner le second contenu lorsque l’on survol le conteneur global.

Vous devez chaîner les deux classes. Le survol d’un élément ayant un impact sur un de ses enfants.

.call:hover .call-content-2 {
  left: 0;
}

CSS : Ajoutez une transition pour finaliser cet exercice.

.call-content-2 {
  background-color: #ffdd40;
  left:200px;
  transition: all 0.5s;
}

Sauf mention contraire*, l'article Transitions en CSS pas à pas [CSS07] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.