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.

Attention
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.

Afficher la solution

Solution :

<!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.

Afficher la solution

Solution :

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.

Afficher la solution CSS

Solution CSS :

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 .
Afficher la solution HTML

Solution HTML :

<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é
Afficher la solution CSS

Solution CSS :

.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.

Afficher la solution HTML

Solution HTML :

<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
Afficher la solution CSS

Solution CSS :

.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.
Ajout de la transition
Ajout de la transition
Afficher la solution CSS

Solution CSS :

.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.

Afficher la solution HTML

Solution HTML :

<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
Afficher la solution CSS

Solution CSS :

.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é.

Modification du modèle de boîte
Modification du modèle de boîte
Afficher la solution CSS

Solution CSS :

.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 sur la bordure
Transition sur la bordure
Afficher la solution CSS

Solution CSS :

.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.

Afficher la solution HTML

Solution HTML :

<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 sur plusieurs propriétés
Transition sur plusieurs propriétés
Afficher la solution CSS

Solution CSS :

.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.
Afficher la solution HTML

Solution HTML :

<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
Modèle de bouton
Afficher les propriétés CSS à utiliser

Propriétés CSS :

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

Afficher la solution CSS

Solution CSS :

.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.

Afficher la solution HTML

Solution HTML :

<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
Effet de survol sur le lien
Afficher la solution CSS

Solution CSS :

.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
Transition sur le lien
Afficher la solution CSS

Solution CSS :

.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
Animation sur l’état actif du lien
Afficher la solution CSS

Solution CSS :

.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.

Dimensionnement du conteneur
Dimensionnement du conteneur
Afficher la solution CSS

Solution CSS :

.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.

Colorisation des blocs de contenu
Colorisation des blocs de contenu
Afficher la solution CSS

Solution CSS :

.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.

Dimensionnement des blocs de contenu
Afficher la solution CSS

Solution CSS :

.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.

Afficher la solution CSS

Solution CSS :

.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.

Contenus côte à côte
Contenus côte à côte
Afficher la solution CSS

Solution CSS :

.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.

Masquage du débordement
Masquage du débordement
Afficher la solution CSS

Solution CSS :

.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.

Repositionnement au survol du parent
Repositionnement au survol du parent
Afficher la solution CSS

Solution CSS :

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

CSS : Ajoutez une transition pour finaliser cet exercice.

Ajout de la transition
Ajout de la transition
Afficher la solution CSS

Solution CSS :

.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

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.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.