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()easetransition-timing-function ne peut pas être animée.Per grammar : sérialisation dans l'ordre de la syntaxe.Syntaxe de transition-timing-function (schéma).
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: 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.Valeur
TempslinearLa valeur varie avec une vitesse uniforme pendant toute la durée de la transition.Valeur.png)
Tempslinear()La valeur suit une série de segment de droite.Valeur
TempseaseLa variation de la valeur est légèrement ralentie au début, et fortement ralentie à la fin.Valeur
Tempsease-inLa variation de la valeur est ralentie au début, puis se poursuit avec une vitesse uniforme.Valeur
Tempsease-outLa variation de la valeur commence avec une vitesses constante, puis ralenti vers la fin.Valeur
Tempsease-in-outLa variation de la valeur subit un ralentissement au début et à la fin.Valeur
Tempssteps(5)La variation de la valeur se fait pas à coups. Le nombre de pas est le paramètre de la fonctionsteps().Valeur
Tempscubic-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; (
ease) transition-timing-function: inherit; transition-timing-function: revert; transition-timing-function: revertLayer; transition-timing-function: unset;Liens vers la présentation de ces valeurs :
initial,inherit,revert,revert-layer,unset.
Possibilité d'animation de la propriété transition-timing-function.
L'animation de la propriété transition-timing-function n'est pas possible.
La propriété transition-timing-function et Javascript.
Avec Javascript, modifier la valeur de transition-timing-function.
En Javascript, voici comment modifier la valeur de transition-timing-function.
Il y a deux codes possibles en Javascript car ce langage accepte le nom de la propriété écrit en kebab-case, typique de CSS, et en camel-case
let el = document.getElementById('id');
el.style['transition-timing-function'] = 'ease-in-out';
// ou
let el = document.getElementById('id');
el.style.transitionTimingFunction = 'ease-in-out';
Avec Javascript, lire la valeur de transition-timing-function.
Ce code récupère la valeur de la propriété lorsque celle-ci a été affectée directement à l'élément lui-même par l'attribut style, et non pas en
passant par un sélecteur CSS.
let el = document.getElementById('id');
let value = el.style['transition-timing-function'];
// ou
let el = document.getElementById('id');
let value = el.style.transitionTimingFunction;
Avec Javascript, lire la valeur calculée de transition-timing-function.
La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages, ou, à défaut, ce sera la valeur initiale de la propriété (ease
dans le cas de transition-timing-function).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('transition-timing-function');
Avec JQuery, modifier la valeur de transition-timing-function.
$('#id').css('transition-timing-function', 'ease-in-out');
// ou
$('#id').css('transitionTimingFunction', 'ease-in-out');
Avec JQuery, lire la valeur calculée de transition-timing-function.
let value = $('#id').css('transition-timing-function');
Autres exemples de code.
D'autres exemples de code Javascript et JQuery interagissant avec CSS sont donnés sur la page Javascript et CSS.
Essayez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété transition-timing-function et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de la propriété, mais dans le cas de transition-timing-function
il n'y a pas de différence entre la valeur appliquée et la valeur calculée.
Simulateur avec la propriété transition-timing-function.
Choisissez une valeur pour la propriété transition-timing-function et cliquez sur le bouton "Démarrer".
Le deuxième élément suit une transition linéaire, pour comparaison.
(pour comparaison)
Support de transition-timing-function.
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 qui définit la fonction d'accélération de la transition.transitions
transition-timing-functionNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
QQ Browser
Safari sur IOS
Firefox pour Androïd
Opéra Mobile
Baidu Browser
KaiOS Browser
UC Browser pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Opéra
Safari
Opéra mini
Évolution de la propriété transition-timing-function.
-
Les transition en CSS - Niveau 1
Normalement, quand une propriété change de valeur, sa restitution à l'écran est immédiate. Ce module de spécification décrit comment faire évoluer des propriétés progressivement d'une valeur à l'autre dans un temps donné. Autrement dit, comment passer d'un état à un autre progressivement.
Il y a cependant besoin d'un événement extérieur pour déclencher le changement de valeur des propriétés (code Javascript, action de l'utilisateur, etc.). C'est en ce sens que les transitions diffèrent des animations, qui, elles, peuvent s'exécuter indépendamment de toute action extérieure.Concernanttransition-timing-function.
20 Mars 2009Document de travail.
-
Module CSS - Fonctions d'accélération - Niveau 1
Concernanttransition-timing-function. Description des différentes dynamiques de mouvement applicables aux transitions.21 Février 2017Document de travail.30 Avril 2019Candidat à la recommandation. -
Les transitions en CSS - Niveau 2
Le niveau 2 de la spécification sur les transitions ajoute la possibilité d'appliquer une transition sur une propriété discrète.
Une nouvelle directive@starting-stylepermet de définir les valeurs de départ pour les valeurs des propriétés . Il est maintenant possible d'appliquer une transition sur des éléments qui passent de l'état invisible à l'état visible.Concernanttransition-timing-function. Pas de changement concernant la propriététransition-timing-function.05 Septembre 2023Document de travail. -
Module CSS - Fonctions d'accélération - Niveau 2
Concernanttransition-timing-function. Pas de changement concernant les dynamiques de mouvement.29 Août 2024Document de travail.
Voir aussi : les transitions.
Le W3C publie les spécifications sous le forme de modules. Les transitions sont décrites dans le module les transitions en CSS, ainsi que les autres propriétés énumérées ci-dessous.
Propriétés :
discrete.