CSS (Cascading Style Sheets)

Auteur: Mohamed CHINY Durée necessaire pour le cours de CSS (Cascading Style Sheets) Niveau recommandé pour le cours de CSS (Cascading Style Sheets) Supports vidéo non disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 13: Les transitions

Toutes les pages

Les transitions CSS

Si jusqu'ici nous avons vu des styles CSS qui peuvent métamorphoser l'affichage de nos objets de fond en comble, je peux vous garantir que ce cette partie est la plus amusante de toutes. En effet, à partir de là, on peut créer des animations, et en plus, avec du code infiniment simple.

Les transitions CSS permettent le passage d'un objet d'un état à un autre d'une manière progressive créant ainsi une animation. Pour être plus précis, ce type d'animation s'appelle Interpolation de mouvement.

L'interpolation de mouvement est un principe qui ne date pas d'hier. En effet, il simplifie nettement la création des séquences animées en ne fournissant qu'un nombre limité d'images (qu'on appelle des images clé), et le processus se charge en suite d'en déduire les images intermédiaires.

Adobe Flash (anciennement Macromedia Flash) est le logiciel le plus populaire pour avoir pris en charge cette technique pour créer les animations destinées au Web. Mais, l'interpolation de mouvement est aussi utilisée au cinéma.

En CSS, on a souvent recours aux transitions avec les pseudo-classes. Par exemple, après avoir survolé un objet, celui ci se met à bouger pour correspondre aux styles définis par :hover.

Pour mieux comprendre de quoi il s'agit nous allons créer un objet et nous allons définir son état survolé (grâce à :hover) deux fois, une sans transition et l'autre avec transitions.

Survolez le premier carré orange puis le deuxième et jugez par vous même.
Vous comprenez maintenant c'est quoi une transition? Parfait.

Propriété transition-property

Supposons que nous avons créé un objet dont on a défini l'arrière plan (propriété background) et la bordure (propriété border), puis nous avons créé des styles appliquées à une pseudo-classe de cet objet (:hover par exemple) qui changeront l'arrière plan et la bordure déjà définis. Si on applique une transition entre l'état initial et l'état survolé, on imagine que l'arrière plan et la bordure se mettront à s'animer pour correspondre aux styles définis à :hover. Cependant, CSS permet de désigner quels sont les propriétés qui devront subir la transition et quels sont celles qui ne s'animeront pas. Il s'agit de la propriété transition-property.

La propriété transition-property accepte comme valeur le nom (ou la famille) de styles sur lesquelles la transition sera appliquée.

Par exemple:
div{
   border:solid 1px blue;
   background-color:orange;
}
div:hover{
   border:dotted 1px green;
   background-color:yellow;
   transition-property:background;
}
Comme vous le constatez en passant de l'état initial à l'état survolé, la bordure et l'arrière plan de la balise <div> changeront, mais seule l'arrière plan subira la transition alors que la bordure changera instantanément.

Par contre, si on avait mis transition-property:all, dans ce cas toutes les propriétés auraient subit la transition.

Certains anciens navigateurs ne reconnaissent pas la propriété transition, il faut donc l'associer au préfixe vendeur. Le style précédent ressemblerait à ceci:
div{
   border:solid 1px blue;
   background-color:orange;
}
div:hover{
   border:dotted 1px green;
   background-color:yellow;
   -webkit-transition-property:background;
   -moz-transition-property:background;
   -o-transition-property:background;
   -ms-transition-property:background;
   transition-property:background;
}

Propriété transition-duration

Comme son nom l'indique la propriété transition-duration permet de spécifier la durée de la transition (la durée que mettra l'animation pour aller de l'état 1 à l'état 2). Elle est exprimée en secondes.

Exemple:
div{
   border:solid 1px blue;
   background-color:orange;
}
div:hover{
   border:dotted 1px green;
   background-color:yellow;
   transition-property:background;
   transition-duration:0.5s;
}
Dans ce cas, l'animation fera une demi seconde. Comme pour la propriété transition-property il faut prévoir le préfixe vendeur à transition-duration.

Propriété transition-timing-function

La fonction transition-timing-function permet de définir la cadence avec laquelle la transition sera faite. Elle permet de changer la vitesse de la transition au long de sa durée (on parle de la courbe d'accélération). Les valeurs que cette propriété peut accueillir sont:
  • ease: le mouvement est rapide au début puis ralentit petit à petit jusqu'à l'arrêt complet.
  • linear: le mouvement garde la même vitesse du début à la fin de la transition.
  • ease-in: le mouvement commence lentement puis gagne en vitesse avec le temps.
  • ease-out: le mouvement est rapide au début puis ralentit à la fin (le ralenti avec ease-out est moins senti qu'avec ease).
  • ease-in-out: le mouvement commence lentement et fini lentement, mais il est plus rapide au milieu de la transition.

Il existe d'autres valeurs mais en général c'est ease qui est utilisé car elle donne un effet plus spectaculaire à la transition.
Exemple:
div{
   border:solid 1px blue;
   background-color:orange;
}
div:hover{
   border:dotted 1px green;
   background-color:yellow;
   transition-propertyall;
   transition-duration:0.5s;
   transition-timing-function:ease;
}
Notez qu'on peut regrouper les propriétés de la transition dans une seule qui est transition. Le dernier code CSS devient alors:
div{
   border:solid 1px blue;
   background-color:orange;
}
div:hover{
   border:dotted 1px green;
   background-color:yellow;
   transition:all 0.5s ease;
}
N'oublier pas de prévoir le préfixe vendeur pour que le code soit compatible avec les anciens navigateurs.
div{
   border:solid 1px blue;
   background-color:orange;
}
div:hover{
   border:dotted 1px green;
   background-color:yellow;
   -webkit-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
   -o-transition:all 0.5s ease;
   -ms-transition:all 0.5s ease;
   transition:all 0.5s ease;
}

Propriété transition-delay

La propriété transition-delay permet de retarder le début de la transition lorsque l’événement qui la déclenche est détecté.

Exemple:
div{
   border:solid 1px blue;
   background-color:orange;
}
div:hover{
   border:dotted 1px green;
   background-color:yellow;
   transition-propertyall;
   transition-duration:0.5s;
   transition-timing-function:ease;
   transition-delay:1s;
}
Dans ce cas, si on survole la DIV, la transition ne commencera qu'une seconde après.

Je vous montre maintenant le code du carré orange qui devient un cercle bleu du début de cette page:

Code HTML:
<div class="cours_transitions"></div>
Code CSS:
.cours_transitions{
   width:200px;
   height:200px;
   background-color:#FF8800;
   margin:30px;
   cursor:pointer;
   -webkit-transition:all 0.5s ease;
   -o-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
   -ms-transition:all 0.5s ease;
   transition:all 0.5s ease;
}
.cours_transitions:hover{
   background-color:#003569;
   border-radius:100px;
   -webkit-transition:all 0.5s ease;
   -o-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
   -ms-transition:all 0.5s ease;
   transition:all 0.5s ease;
}
Ce qui donne le résultat de tout à l'heure:
Vous avez remarqué que j'ai déclaré les transition sur l'état survolé et l'état initiale de la balise <div>. De cette manière le mouvement se fera sentir quand on survole l'objet et aussi quand on le quitte.

Exemple: menu accordéon

On va essayer de mettre en pratique les transitions CSS. L'objectif est de créer un menu dit accordéon. C'est un menu de navigation dont les entrées s'allongent et se rétractent comme le soufflet d'un accordéon. Pour faire simple on va agir sur l'épaisseur de la bordure de chacun des éléments constituant le menu. Associé aux transitions, la bordure changera d'épaisseur progressivement ce qui fera penser à un accordéon en action.

Voici le code HTML:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <link rel="stylesheet" type="text/css" href="monstyle.css" />
   </head>
   <body>
      <nav>
         <div class="exercice_accordeon">Accueil</div>
         <div class="exercice_accordeon">Qui sommes-nous?</div>
         <div class="exercice_accordeon">Nos produits</div>
         <div class="exercice_accordeon">SAV</div>
         <div class="exercice_accordeon">Contact</div>
      </nav>
   </body>
</html>
Code CSS:
.exercice_accordeon{
   width:200px;
   background-color:#CCCCCC;
   padding:10px;
   margin-bottom:1px;
   font:10pt verdana;
   color:#FFFFFF;
   border:solid 1px #CCCCCC;
   cursor:pointer;
   -webkit-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
   -o-transition:all 0.5s ease;
   -ms-transition:all 0.5s ease;
   transition:all 0.5s ease;
}
.exercice_accordeon:hover{
   background-color:#FFFFFF;
   color:#003569;
   border:solid 1px #003569;
   border-bottom:solid 60px #003569;
   -webkit-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
   -o-transition:all 0.5s ease;
   -ms-transition:all 0.5s ease;
   transition:all 0.5s ease;
}
Résultat obtenu:
Accueil
Qui sommes-nous?
Nos produits
SAV
Contact
Quiz (Pour tester vos connaissances)
  1. Si la propriété transition-delay n'est pas déclarée sur un élément survolé (déclaré avec la pseudo classe :hover) alors:
L'effet de la transition commence dès que le survol est detecté
L'effet de la transition commence une seconde après le survol.
La transition ne s’exécute pas.
  1. Dans le code suivant:
    div:hover{
       transition-property : background;
       transition-duration : 0.5s;
       transition-timing-function : ease;
       width : 500px;
       background-color : blue;
    }
La largeur de la balise <div> devient progressivement 500px sur une durée d'une demi seconde
La couleur d'arrière plan de la balise <div> devient progressivement bleue sur une durée d'une demi seconde
La largeur et la couleur d'arrière plan de la balise <div> changent progressivement sur une durée d'une demi seconde
  1. La propriété transition-timing-function avec la valeur ease donne:
Une animation lente au début et qui devient rapide à la fin.
Une animation rapide au début et qui devient lente à la fin.
Une animation lente au début et à la fin, mais plus rapide au milieu.
  1. Une transition ne peut pas fonctionner sans préfixe vendeur.
Oui
Non
  1. Que fait le code suivant?
    nav:hover{
       transition-property : all;
       transition-duration : 1s;
       transition-timing-function : linear;
       transition-delay : 0.5s;
       opacity : 0.5;
       filter : alpha(opacity = 50);
    }
rend la balise <nav> légèrement transparente progressivement sur une durée d'une demi-seconde, et l'effet de la transition commence avec le survol.
rend la balise <nav> légèrement transparente progressivement sur une durée d'une demi-seconde, et l'effet de la transition commence une seconde après le survol.
rend la balise <nav> légèrement transparente progressivement sur une durée d'une seconde, et l'effet de la transition commence une demi seconde après le survol.