Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

transition-timing-function - Propriété CSS

transition-timing-function

Résumé des caractéristiques de la propriété transition-timing-function

Description rapide
Propriété définissant la fonction d'accélération à utiliser pendant une transition.
Statut
Standard
S'applique à
Tous les éléments.
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
ease | ease-in | ease-out | ease-in-out | linear | steps() | cubic-bezier()
Pourcentages
Ne s'appliquent pas.
Valeur initiale
ease
Héritée par défaut
Non
Type d'animation
Étant elle même un des paramètres d'animation, cette propriété ne peut pas être animée.
Module W3C
Module CSS - Les transitions
Références (W3C)
Statut du document:: WD (document de travail)

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:
 linear linear ease ease ease-in ease-in ease-out ease-out ease-in-out ease-in-out steps() steps() cubic-bezier() cubic-bezier() , ,
;
  • 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 fonction steps().
    cubic-bezier()
    La variation de la valeur suit une loi définie par les quatre paramètres de la fonction cubic-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.

transition-timing-function :

Linear
(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.

Colonne 1
Prise en charge par les navigateurs des effets de transition en général .
Colonne 2
Support de la propriété transition-timing-function et des fonctions d'accélération.
1
Transitions
2
transition-timing-function
Estimation de la prise en charge en pourcentage du parc actuel.
98%
95%

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.

Propriétés.

Effet d'animation simple.
Définit le temps d'attente avant que la transition ne commence.
Définit la durée d'une transition.
Définit la ou les propriétés sur lesquelles doit s'appliquer une transition.