Objectif
-
Etre capable de travailler avec les propriétés
transition-property,transition-duration,transition-timing-functionettransition-delay.Présentation
- La transition c'est le fait de passer un objet d'un état A à un état B
- Les transitions CSS permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées.
- Les transitions CSS vous permettent de choisir :
- les propriétés à animer en les listant explicitement
- le début de l'animation
- la durée de l'animation
- la façon dont la transition s'exécutera
Les bases des transitions CSS
- transition-property : propriété à laquelle la transition s’applique.Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions.
- transition-duration : durée de la transition (0,3 secondes).
- transition-delay : courbe de vitesse de la transition, cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition..
Un exemple simple
- Créer une page HTML de contenu basique, constirué d'un simple bloc
<div>
<!Doctype html> <html> <head> <meta charset ="utf-8"> <title><transition et animation</title> <link href="style.css" type="text/css" rel="stylesheet"/> </head> <body> <div></div> </body> </html>- Créer une page HTML de contenu basique, constirué d'un simple bloc
- Ajouter le code css suivant:
- Cela nous donne un élément bleu qui devient vert au survol.
- Ajouter maintenant une transition sur
background-color
div{
width:200px;
height:50px;
background-color:green;
}
div:hover{
background-color:blue;
}transition-property: background-color;
<li>Appliquer une transition sur plusieurs propriétés
-
La propriété transition se définit comme une ou plusieurs propriétés de transitions, séparées par des virgules.
transition-property: background-color,width,height;
transition-duration: 1s;
transition-delay: 0.5s;
Transition-timing-function
- La propriété
transition-timing-functiondécrit comment l'objet doit transiter d'un état à un autre. - Ceci permet donc de définir une courbe d’accélération, de manière à ce que la vitesse de la transition varie au cours de sa durée.
- Les valeurs prédéfinies sont les suivantes:
ease: rapide au début et ralenti à la fin;
ease-in: lent au début et accélère petit à petit à la fin;ease-out: rapide au début et de plus en plus lent à la fin;ease-in-out: départ et fin lents;linear: vitesse constante;
Application
- Appliquer une transition de 2 secondes à la largeur du div et définir une fonction
ease-in-outpour la transition