CSS
Transitions
Recherche…
Syntaxe
- transition: [propriété de transition] [durée de transition] [fonction de synchronisation de transition] [délai de transition];
Paramètres
| Paramètre | Détails |
|---|---|
| propriété de transition | La propriété CSS spécifique dont la valeur doit être modifiée (ou) all , si toutes les propriétés de transition doivent être transférées. |
| durée de transition | La durée (ou la période) en secondes ( s ) ou millisecondes ( ms ) sur laquelle la transition doit avoir lieu. |
| fonction de transition-timing | Une fonction qui décrit comment les valeurs intermédiaires pendant la transition sont calculées. Les valeurs couramment utilisées sont la ease , la ease-in , la ease-out , la ease-in-out , la linear , le cubic-bezier() , les steps() . Vous trouverez plus d'informations sur les différentes fonctions de synchronisation dans les spécifications du W3C . |
| retard de transition | La quantité de temps qui doit s’être écoulée avant que la transition ne puisse commencer. Peut être spécifié en secondes ( s ) ou millisecondes ( ms ) |
Remarques
Certains anciens navigateurs ne prennent en charge que les propriétés de transition préfixées par le fournisseur :
-
-webkit: Chrome 25-, Safari 6-, Safari et Chrome pour iOS 6.1-, Android 4.3- Navigateur, Blackberry Browser 7-, UC Browser 9.9- pour Android. -
-moz: Firefox 15-. -
-o: Opera 11.5-, Opera Mobile 12-.
Exemple:
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
Sténographie de transition
CSS
div{
width: 150px;
height:150px;
background-color: red;
transition: background-color 1s;
}
div:hover{
background-color: green;
}
HTML
<div></div>
Cet exemple changera la couleur de fond lorsque le div sera survolé, le changement de couleur d'arrière-plan durera 1 seconde.
Transition (longhand)
CSS
div {
height: 100px;
width: 100px;
border: 1px solid;
transition-property: height, width;
transition-duration: 1s, 500ms;
transition-timing-function: linear;
transition-delay: 0s, 1s;
}
div:hover {
height: 200px;
width: 200px;
}
HTML
<div></div>
- transition-property : Spécifie les propriétés CSS de l'effet de transition. Dans ce cas, le div se développera horizontalement et verticalement lorsqu'il sera survolé.
- transition-duration : Spécifie la durée d' exécution d'une transition. Dans l'exemple ci-dessus, les transitions en hauteur et en largeur prendront respectivement 1 seconde et 500 millisecondes.
- transition-timing-function : Spécifie la courbe de vitesse de l'effet de transition. Une valeur linéaire indique que la transition aura la même vitesse du début à la fin.
- transition-delay : Spécifie la durée d'attente avant le démarrage de l'effet de transition. Dans ce cas, la hauteur commencera à faire la transition immédiatement, alors que la largeur attendra 1 seconde.
cubic-bezier
La fonction cubic-bezier est une fonction de synchronisation de transition qui est souvent utilisée pour des transitions personnalisées et fluides.
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
La fonction prend quatre paramètres:
cubic-bezier(P1_x, P1_y, P2_x, P2_y)
Ces paramètres seront mappés sur des points faisant partie d'une courbe de Bézier :
Pour les courbes CSS de Bézier, P0 et P3 sont toujours au même endroit. P0 est à (0,0) et P3 à (1,1), ce qui signifie que les paramètres passés à la fonction cubique-bezier ne peuvent être qu'entre 0 et 1.
Si vous passez des paramètres qui ne sont pas dans cet intervalle, la fonction passera par défaut à une transition linear .
Comme cubic-bezier est la transition la plus flexible en CSS, vous pouvez traduire toutes les autres fonctions de synchronisation de la transition en fonctions cubiques-bezier:
linear : cubic-bezier(0,0,1,1)
ease-in : cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-out : cubic-bezier(0.0, 0.0, 0.58, 1.0)
ease-in-out : cubic-bezier(0.42, 0.0, 0.58, 1.0)