transition-timing-function CSS propriété

Définition de la CSS transition-timing-function.

La propriété de Transition CSS transition-timing-function permet de spécifier la vitesse de progression de la transition CSS au cours de la durée de son exécution.

Exemple de syntaxe CSS transition-timing-function :

transition-timing-function : ease-in-out;
transition-timing-function : steps;
transition-timing-function : linear;
transition-timing-function : ease-in;
transition-timing-function : ease-out;

La propriété de transition CSS transition-timing-function CSS accepte une/des valeurs suivantes :

ease, équivalent à cubic-bezier(0.25, 0.1, 0.25, 1.0). Valeur par défaut.
La transition Css accélère très vite au début et ralentit à la moitié de la transition.
linear : équivalent à cubic-bezier(0.0, 0.0, 1.0, 1.0).
La transition CSS est jouée de façon linéaire.
ease-in : équivalent à cubic-bezier(0.42, 0, 1.0, 1.0).
La transition CSS démarre lentement et accélère progressivement avant la fin
ease-out : équivalent à cubic-bezier(0, 0, 0.58, 1.0).
La transition CSS démarre rapidement et ralentit progressivement avant la fin.
ease-in-out : équivalent à cubic-bezier(0.42, 0, 0.58, 1.0).
Dans la moitié de la transition CSS, elle se comporte comme ease-in et dans la deuxième moitié, elle se comporte comme ease-out.
step-start : équivalent à steps(1, start).
La transition CSS comporte une seule étape et elle est jouée au début de l'étape.
step-end : équivalent à steps(1, end).
La transition CSS comporte une seule étape et elle est jouée à la fin de l'étape.
steps(n, mot cle) : n nombre positif et start ou end.
La transition CSS est divisée en n étape(s) et elle est jouée au début de l'étape si start ou en fin si end. Si vous avez une transition de 15s et trois étapes soit une étape de 5 secondes. Si je suis start, je suis joué quand je rentre dans l'étape, si je suis end, je suis joué à la fin des 5s de l'étape.
cubic-bezier : quatre valeurs qui spécifient les points P1 et P2 de la courbe de bezier (x1, y1, x2, y2). x1, y1, x2, y2 sont des nombres décimaux avec au moins un chiffre après la virgule. Les X doivent être compris entre 0 et 1.

La propriété de Transition CSS transition-timing-function accepte une ou plusieurs valeurs citées ci-dessus séparées par un virgule.

J'ai fait un article complet sur la manière de concevoir des transitions en CSS3.

Vous trouverez aussi un petit outil pour générer des exemples simples de transitions CSS3. Vous pourrez donc tester en direct la propriété transition-timing-function Css.

Exemple de code transition-timing-function CSS

Conditions d'application de la CSS transition-timing-function.

La valeur de la CSS transition-timing-function peut être mise directement dans la propriété de raccourci CSS transition.

Héritage des valeurs Css de transition-timing-function.

La fonction timing de la Transition CSS transition-timing-function n'est pas héritée.

Problème d'interprétation de transition-timing-function en Css.

La propriété de Transition CSS transition-timing-function pose des problèmes d'interprétation, n'est reconnue que par Internet Explorer 10+ et Firefox 16+ et Opera 12.1+.

Règles de syntaxes CSS pour transition-timing-function.

Règle d'écriture relative à transition-timing-function

La propriété de Transition CSS transition-timing-function CSS accepte une ou plusieurs valeurs de vitesses de transition qui seront séparées par un virgule.
Le nombre de valeur est lié aux nombres de propriétés déclarées dans la propriété de Transition CSS transition-property.
Si vos vitesses de transition sont identiques, vous pouvez mettre une seule valeur.

Exemple d'écriture CSS de transition-duration :

.ma-transition{
  transition-property : propriete_css, propriete_css;
  transition-timing-function : ease-in-out, step-start;
}

Compatibilités navigateurs de la propriété transition-timing-function

Détails des versions de la CSS transition-timing-function: Propriété transition-timing-function est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS transition-timing-function: Propriété CSS transition-timing-function est compatible à partir de Chrome 26; Propriété CSS transition-timing-function est compatible à partir de Firefox 16; Propriété CSS transition-timing-function est compatible à partir de Internet Explorer 10; Propriété CSS transition-timing-function est compatible à partir de Opera 12.1; Propriété CSS transition-timing-function est compatible à partir de Safari 6.1

Propriétés CSS préfixées de transition-timing-function

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété transition-timing-function CSS :

Pour Firefox 4.0+ et < 16, vous pouvez utiliser : -moz-transition-timing-function.
Pour Chrome 2.1+ et Safari 3.1+, vous pouvez utiliser : -webkit-transition-timing-function. Pour la valeur cubic-bezier, un bug fait que les valeurs des Y ne peuvent être inférieures à 0 et supérieures à 1.
Pour Opera 10+, vous pouvez utiliser : -o-transition-timing-function. Pour info, il semble les versions préfixées pour le animations CSS soient supprimées sur la version 12.50 au profit des versions w3c non préfixées.
Il existe bien une propriété css -ms-transition-timing-function mais qui est compatible Internet Explorer 10 (donc pas d'intérêt de la mettre). Personnellement, je n'ai trouvé aucune documentation officielle sur la propriété css -ms-transition-timing-function

Concernant les propriétés css step*, pour "webkit" et "O" pas de documentation cependant ils semblent prendre en charge ces propriétés css.

Exemples et astuces CSS pour utiliser transition-timing-function

cubic-bezier() et steps()

Pour en savoir plus sur cubic-bezier() et steps(), allez voir la propriété css animation-timing-function

Votre avis sur la définition transition-timing-function en CSS

Votez pour la définition CSS `transition-timing-function`

Votes: 4.7 / 5 - 6 votes
Cliquez sur une étoile pour voter.