Les transitions permettent aux changements de valeur de propriétés de se produire en douceur sur une durée spécifiée.
Elles se déclarent sur l’état initial de l’élément,
et sont appliquées lorsque les valeurs des propriétés changent, par exemple au focus ou même au changement de classe de l’élément.
Il y a environ 50 propriétés qui peuvent être transitionnées
Définit sur quelle propriété s’applique la transition [CSS3]
transition-property: all | <property> | none
Définit la durée de la transition [CSS3]
transition-duration: <time>
Définit le comportement de la transition [CSS3]
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out |
step-start | step-end | steps(<n>[,start|end]) |
cubic-bezier(<x1>,<y1>,<x2>,<y2>)
Par défaut, les transitions commencent lentement, accélèrent, puis ralentissent un peu avant de terminer - c’est le timing ease.
Il est possible de modifier ce comportement en utilisant une autre fonction, ou en définissant soi-même le comportement de la transition via cubic-bezier(). On peut également créer une animation frame par frame, à la manière d’un GIF, avec steps()
| Valeur | Description |
|---|---|
ease |
Commence lentement, accèlère puis ralentit (par défaut) |
linear |
Vitesse constante |
ease-in |
Commence lentement puis accèlère |
ease-out |
Commence rapidement puis ralentit |
ease-in-out |
Similaire à ease mais plus rapide au milieu |
cubic-bezier(x1,y1,x2,y2) |
Timing personnalisé |
steps(<integer>, [start \| end]) |
Avancer par saccades |
step-start |
Équivaut à steps(1, start) |
step-end |
Équivaut à steps(1, end) |
Définit un délai entre le déclenchement et la transition [CSS3]
0 par défaut
transition-delay: <time>
Le délai peut être utilisé pour démarrer une animation après une autre.
JSFiddle transition-delay
Est un raccourci pour les propriétés précédentes [CSS3]
transition: <property> <duration> [<timing-function>] [<delay>]
Exemple:
{
background-color: orange;
transition: background 1s;
&:hover {
background-color: blue;
}
}
Multiples transitions :
Une transition peut porter sur une propriété en particulier ou toutes.
Pour appliquer différentes transitions sur différentes propriétés, les définir séparées par une virgule.
transition: background 1s, opacity 0.5s 0.5s;
Est équivalent à
transition-property: background, opacity;
transition-duration: 1s, 0.5s;
transition-delay: 0s, 0.5s;