Les transitions en CSS
Les transitions en CSS
-
Objectif
-
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> - Ajouter le code css suivant:
- Cela nous donne un élément bleu qui devient vert au survol.
- Ajouter maintenant une transition sur
background-color -
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;-
Application
- Appliquer une transition de 2 secondes à la largeur du div et définir une fonction
ease-in-outpour la transition
-
Etre capable de travailler avec les propriétés
transition-property, transition-duration, transition-timing-function et transition-delay.
<!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>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;
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;
