Les transitions en CSS

apcpedagogie > Les cours de programmation > CSS > Les transitions en CSS

Les transitions en CSS

24 novembre 2019
Posté par: Riadh HAJJI
Catégorie: CSS

460 vues

Les transitions en CSS

Objectif

transition-property

transition-duration

transition-timing-function

transition-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>

<!Doctype html>

<html>

<head>

</head>

<body>

</body>

</html>

Ajouter le code css suivant:

div{
width:200px;
height:50px;
background-color:green;
}
div:hover{
background-color:blue;
}

div{

width:200px;

height:50px;

background-color:green;

}

div:hover{

background-color:blue;

}

Cela nous donne un élément bleu qui devient vert au survol.
Ajouter maintenant une transition sur background-color

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-function dé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-out pour la transition

Sommaire du cours CSS