Les transitions permettent, lors d'un événement (au survol de la souris par exemple), le changement progressif de la valeur d'une propriété CSS sur une durée spécifiée.
Exemple : Lors du survol par la souris du rectangle sa propriété CSS background-color
est modifiée de rouge à bleu :
1) Sans transition :
ICN
2) Avec une transition durant 3 seconde :
ICN
Le code utilisé pour l'exemple sans transition est le suivant :
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Animation en CSS</title> </head> <body> <p class="box">ICN</p> </body> </html>
CSS
.box{ width: 100px; line-height: 100px; text-align: center; font-size: 50px; font-weight: bold; font-family: arial; background-color: red; color: blue; } .box:hover{ background-color: blue; }
Pour ajouter une transition à ce changement de couleur d'arrière-plan, il faut compléter le CSS par :
CSS
.box{ width: 100px; line-height: 100px; text-align: center; font-size: 50px; font-weight: bold; font-family: arial; background-color: red; color: blue; transition-property: background; transition-duration: 3s; transition-timing-function: ease; } .box:hover{ background-color: blue; }
transition-property
: propriété à laquelle la transition s'applique (dans ce cas, la propriété background).transition-duration
: durée de la transition (3 secondes).transition-timing-function
: indique la courbe de vitesse entre l’état initial et final d’une transition (ease).Plusieurs courbes de vitesses sont possibles :
Exemples sur le site w3schools.com.
Les transitions peuvent être différés par rapport à l'instant où l’événement déclencheur se produit (survole de la souris) en utilisant la propriété transition-delay
.
Exemple :
.box{ width:100px; height:100px; background-color:red; transition-property: background; transition-duration: 3s; transition-timing-function: ease; transition-delay: 2s; /* l'animation démarre 2 secondes après le survol */ }
Il est possible de simplifier la déclaration de la transition précédente en utilisant la syntaxe suivante :
transition: background 3s ease 2s;
Il est possible d'enchainer plusieurs transitions en les séparant d'une virgule.
transition: background 3s ease 2s, color 3s ease 2s;
Il ne faut pas oublier d'ajouter la propriété color
:
.box:hover{ background-color: blue; color: red; }
On peut appliquer une transition à toutes les propriétés disponibles en utilisant la valeur all.
En utilisant la valeur all, le code précédent pourrait s'écrire :
transition: all 3s ease 2s;
A faire vous-même 1 | Codepen |
---|---|
Redimensionnement d'une image avec la propriété width Écrire le code permettant de réaliser l'animation suivante : ![]() |
A faire vous-même 2 | Codepen |
---|---|
Transition avec plusieurs propriétés Écrire le code permettant de réaliser l'animation suivante : ![]() Pour vous aider :
La propriété opacity définit la transparence d'un élément. opacity: 1; /*Totalement opaque */ opacity: 0.6; /* Légèrement transparent */ opacity: 0; /* Complètement transparent */ |
A faire vous-même 3 | Codepen |
---|---|
Transition avec sur deux images Écrire le code permettant de réaliser l'animation suivante : ![]() ![]() Pour vous aider : HTML <div class="fader"> <img class="image3" src= http://icn.lycee-valin.fr/dokuwiki/lib/exe/fetch.php?media=html-css:animation_css:portrait-homme1.png> <img class="image4" src= http://icn.lycee-valin.fr/dokuwiki/lib/exe/fetch.php?media=html-css:animation_css:portrait-homme2.png> </div> CSS .image3{ position:absolute; } .image3, .fader:hover .image4{ opacity: 1; } .image4, .fader:hover .image3{ opacity: 0; } |
A faire vous-même 4 | Codepen |
---|---|
Menu animé A l'aide du cours sur la création d'un menu horizontal, compléter le code CSS afin d’obtenir un menu animé comme ci-dessous. Pour vous aider : HTML <div class="anime-menu"> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> CSS .anime-menu ul{ padding: 0px; margin: 0px; list-style-type: none; font-family: arial; } .anime-menu li{ width : 100px; height : 40px; text-align :center; line-height : 40px; margin-bottom:2px; } .anime-menu li a{ display : block ; text-decoration : none ; color : white ; background-color : #333333 ; }
|
A faire vous-même 5 | Codepen |
---|---|
Menu avec une image coulissante Compléter le code CSS afin reproduire l'animation ci-dessous. Pour vous aider : HTML <div class="container"> <p class="texte">Coucou !</p> <a href="#"> <img src = "http://icn.lycee-valin.fr/dokuwiki/lib/exe/fetch.php?media=html-css:animation_css:girl.jpg"> </a> </div> CSS .container{ position: relative; vertical-align: top; background: #333; color: #fff; height: 200px; width: 200px; margin: 0; padding: 0; overflow: hidden; } img{ position: absolute; left: 0; top: 0; width:200px; transition-property: padding-left; transition-duration: .5s; transition-timing-function: ease-out; } .texte{ text-align:center; height:200px; line-height:200px; margin:0; font-size:30px; font-family:calibri; } }
|
A faire vous-même 7 | Codepen |
---|---|
Menu Écrire le code permettant de réaliser l'animation suivante : Pour réaliser cette animation, vous devez utiliser la propriété transform . Voir le cours sur le site :Alsacreations.com. |