mozilla
Vos résultats de recherche

    transition-timing-function

    Cette fonction est expérimentale
    Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
    Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

    Résumé

    La propriété CSS transition-timing-function est utilisée pour décrire comment les valeurs intermédiaires des propriétés CSS affectées par un effet de transition sont calculées. Ceci permet donc de définir une courbe d'accelération, de manière à ce que la vitesse de la transition varie au cours de sa durée.

    Cette courbe d'accelération est définie en utilisant une <timing-function> pour chacune des propriétés à animer.

    Il est possible de définir plusieurs fonctions de temporisation ; chacune sera appliquée à la propriété correspondante comme spécifié par la propriété transition-property, qui agit comme liste maîtresse. S'il y a moins de fonctions définies que d'éléments dans la liste, les valeurs manquantes sont remplacées par la valeur par défaut (ease). S'il y a trop de fonction de temporisation, la liste est simplement tronquée à la bonne dimension. Dans les deux cas, la déclaration CSS reste valide.

    Syntaxe

    Syntaxe formelle : <timing-function>#
    
    transition-timing-function: ease
    transition-timing-function: ease-in
    transition-timing-function: ease-out
    transition-timing-function: ease-in-out
    transition-timing-function: linear
    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
    transition-timing-function: step-start
    transition-timing-function: step-stop
    transition-timing-function: steps(4, end)
    
    transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
    

    Valeurs

    <timing-function>
    Chaque <timing-function> représente une fonction de temporisation à lier avec la propriété à animer, comme défini par transition-property.

    Exemples

    Il y a de nombreux exemples de transitions CSS dans l'article Transitions CSS.

    Spécifications

    Spécification Statut Commentaire
    CSS Transitions Working Draft  

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support de base (Oui)-webkit 4.0 (2.0)-moz
    16.0 (16.0)
    10 11.6-o
    12.5 #
    (Oui)-webkit
    Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base (Oui)-webkit (Oui)-webkit 4.0 (2.0)-moz
    16.0 (16.0)
    ? ? (Oui)-webkit

    Voir également

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: teoli, FredB
    Dernière mise à jour par : teoli,
    Masquer la barre latérale