CSS - Propriété transition-timing-function
Description de la propriété transition-timing-function
.
Définit une fonction pour calculer la dynamique de la transition. La progression est-elle linéaire ? Y a-t-il ralentissement ou accélération ? etc.
Pour une explication générale sur les transitions, reportez-vous à la propriété raccourcie transition
.
Valeurs pour transition-timing-function
.
- transition-timing-function: ease-in;
Les valeurs sont les mêmes que celles de la propriété
animation-timing-function
. Reportez-vous à cette propriété pour consulter les valeurs possibles.La valeur par défaut est
ease
. - 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 les transitions multiples. - transition-timing-function:
initial
;La valeur initiale est
ease
. -
Reportez-vous à la description générale de ces valeurs.
Simulateur.
transition-timing-function
:
(pour comparaison)
Voir aussi...
Animation - Propriétés.
animation
: Paramètres d'animation.animation-delay
: Temps d'attente avant le démarrage de l'animation.animation-direction
: Sens de l'animation (normal ou inverse).animation-duration
: Durée d'une animation.animation-fill-mode
: Style de remplacement lorsque l'animation n'est pas en cours.animation-iteration-count
: Nombre de répétition de l'animation.animation-name
: Nom d'une animation.animation-play-state
: État de l'animation (en cours ou en pause).animation-timing-function
: Fonction non linéaire définissant la progression d'une animation.transition
: Effet d'animation simple.transition-delay
: Temps d'attente avant que la transition ne commence.transition-duration
: Durée de la transition.transition-property
: Propriété sur laquelle doit s'appliquer la transition.
Animation - Directives.
@keyframes
: Définition d'une animation.
Animation - Fonctions.
cubic-bezier()
: Détermine une progression non linéaire pour les animations.steps()
: Définit une animation saccadée, pas par pas.