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 : <html>
.box1{
width: 100px; line-height: 100px; text-align: center; font-size: 50px; font-weight: bold; font-family: arial; background-color: red; color: blue;
}
.box1:hover{
background-color:blue; }
<p class=“box1”>ICN</p> </html>
2) Avec une transition durant 3 seconde : <html>
.box{
width: 100px; line-height: 100px; text-align: center; font-size: 50px; font-weight: bold; font-family: arial; background-color: red; color: blue; margin-left:30px; transition-property: background; transition-duration: 3s; transition-timing-function: ease;
}
.box:hover{
background-color:blue; }
<p class=“box”>ICN</p> </html>
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 |
---|---|
.image1:hover{
width:300px;
}</style></html>
||
A faire vous-même 2 | Codepen |
---|---|
.image2:hover{
width:300px; opacity: 1;
}</style></html>
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 |
---|---|
.image3, .fader:hover .image4{
opacity: 1;
}
.image4, .fader:hover .image3{
opacity: 0;
}
.fader .image3, .fader .image4{
transition: all 1s ease-in-out;
} .fader{
width:266px; margin:auto;
}</style></html>
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 |
---|---|
.anime-menu li{
width : 100px; height : 40px; text-align :center; line-height : 40px; margin-bottom:2px; font-family: arial; transition: all 0.2s ease;
} .anime-menu li a{
display : block ; text-decoration : none ; color : white ; background-color : #333333 ;
} .anime-menu li:hover{
width:120px; font-size:1.5em;
} .anime-menu li a:hover{
background-color : #D0008D ; border : 0px #D0008D solid ; border-radius:0 20px 20px 0; text-decoration : none ;
}
</style></html>
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 |
---|---|
position: relative; vertical-align: top; background: #333; color: #fff; height: 200px; width: 200px; margin: 0 auto 0 auto; padding: 0; overflow: hidden; }
.container2 img{
position: absolute; left: 0; top: 0; width:200px; transition-property: padding-left; transition-duration: .5s; transition-timing-function: ease-out;
}
.container2 img:hover{
padding-left:200px;
}
.container2 .texte{
text-align:center; height:200px; line-height:200px; margin:0; font-size:30px; font-family:calibri;
}</style></html>
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; } }
Pour comprendre la propriété overflow
: ici
Pour comprendre la propriété position
: ici||
A faire vous-même 6 | Codepen |
---|---|
position: relative; vertical-align: top; background: #333; color: #fff; height: 200px; width: 200px; margin: 0 auto 0 auto; padding: 0; overflow: hidden; }
.container3 img{
position: absolute; left: 0; top: 0; width:200px; transition-property: padding-left; transition-duration: .5s; transition-timing-function: ease-out;
}
.container3 img:hover{
padding-left:138px;
}
.liste_photos{
padding:20px 0; margin: 10px 0; list-style-type: none; font-family: calibri, serif;
}
.liste_photos li {
font-size: 1.5em; line-height: 1.5em; text-decoration : none ; color : white ;
}
</style></html>
||
A faire vous-même 7 | Codepen |
---|---|
.container4{ position: relative; vertical-align: top; background: #333; color: #fff; height: 200px; width: 200px; margin: 0 auto 0 auto; padding: 0; overflow: hidden; }
.container4 img{
position: absolute; left: 0; top: 0; width:200px; transition-property: transform; transition-duration: .5s; transition-timing-function: ease-out; transform-origin: 50% 50%;
}
.container4 img:hover{
transform: rotate(90deg) translate(138px);
}
.liste_photos4{
padding: 10px; margin-left: 10px; list-style-type: none; font-family: calibri, serif;
}
.liste_photos4 li {
font-size: 1.5em; line-height: 1.5em; text-decoration : none ; color : white ;
}
</html>
Pour réaliser cette animation, vous devez utiliser la propriété transform
.
Voir le cours sur le site :Alsacreations.com.
||