transition-timing-function - Propriété CSS
Résumé des caractéristiques de la propriété transition-timing-function
ease
| ease-in
| ease-out
| ease-in-out
| linear
| steps()
| cubic-bezier()
ease
Description de la propriété transition-timing-function
.
transition-timing-function
définit une fonction d'accélération pour calculer la dynamique de la transition.
La progression est-elle linéaire ? Y a-t-il ralentissement ou accélération ? etc.
Rappel : une transition consiste à faire évoluer progressivement la valeur d'une propriété.
Pour une explication générale sur les transitions, reportez-vous à la propriété résumée transition
.
Valeurs pour transition-timing-function
.
transition-timing-function:
;
- transition-timing-function: ease-in;
Les différentes fonctions d'accélération sont décrites ci-dessous. Ce sont les mêmes que celles de la propriété
animation-timing-function
.
linear
La valeur varie avec une vitesse uniforme pendant toute la durée de la transition
ease
La variation de la valeur est légèrement ralentie au début, et fortement ralentie à la fin.ease-in
La variation de la valeur est ralentie au début, puis se poursuit avec une vitesse uniforme.
ease-out
La variation de la valeur commence avec une vitesses constante, puis ralenti vers la fin.ease-in-out
La variation de la valeur subit un ralentissement au début et à la fin.steps(5)
La variation de la valeur se fait pas à coups. Le nombre de pas est le paramètre de la fonctionsteps()
.cubic-bezier()
La variation de la valeur suit une loi définie par les quatre paramètres de la fonctioncubic-bezier()
. - transition-timing-function: ease-in, linear;
Lorsque plusieurs valeurs sont spécifiées, séparées par des virgules, elles s'appliquent aux différentes transitions définies par la propriété
transition-property
. Voir les explications sur la page sur les transitions multiples. - transition-timing-function:
initial
; transition-timing-function:inherit
; transition-timing-function:revert
; transition-timing-function:revert-layer
; transition-timing-function:unset
;La valeur initiale est :
.ease
Animation de la propriété transition-timing-function
.
L'animation de la propriété transition-timing-function
n'est pas possible.
Simulateur.
Choisissez une valeur pour la propriété transition-timing-function
et cliquez sur le bouton "Start".
Le deuxième élément suit une transition linéaire, pour comparaison.
(pour comparaison)
Prise en charge par les navigateurs (compatibilité).
Les fonctions d'accélération sont bien prises en charge par tous les navigateurs depuis pas mal d'années.
Il n'y a pas de problème de compatibilité à considérer pour la propriété transition-timing-function
.
transition-timing-function
et des fonctions d'accélération.
transition-timing-function
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que transition-timing-function
.
Les spécifications CSS éditées par le W3C sont organisées en modules. transition-timing-function
fait partie du Module CSS - Les transitions (CSS Transitions). Les définitions suivantes sont également décrites dans ce même module.