Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Vos résultats de recherche

    single-transition-timing-function

    Le type de donnée <timing-function> représente une fonction mathématique qui décrit la vitesse à laquelle évolue une valeur unidimensionnelle lors d'une transition ou d'une animation. Cela permet de définir une courbe d'accélération afin que la vitesse de l'animation puisse changer lors de son exécution. Ces fonctions sont souvent appelées « fonction de temporisation » ou « easing functions » (en anglais).

    Cette fonction prend comme entrée un ratio de temps (0 : l'état initial, 1 : l'état final) et produit un ratio d'évolution (sous la forme d'une valeur <number>) allant également de 0.0 à 1.0.

    Le ratio de sortie peut être supérieur à 1.0 ou inférieur à 0.0. Cela entraînera l'animation « plus loin » que l'état final ou initial avant de revenir. Cela permettra de créer un effet de rebondissement.

    Toutefois, si la valeur de sortie correspondante est entrainée hors de son domaine de validité (par exemple une composante de couleur entraînée au-delà de 255), la valeur est ramenée à la valeur autorisée la plus proche (dans l'exemple : 255).

    Valeurs

    CSS prend en charge deux types de fonctions de temporisation :

    • un sous-ensemble des courbes de Bézier cubiques
    • des fonctions en escalier.

    Les plus utiles de ces fonctions sont également disponibles via un mot-clé qui permet de les décrire.

    La classe de fonctions cubic-bezier()

    La notation fonctionnelle cubic-bezier() définit une courbe de Bézier cubique. Ces courbes sont continues et sont généralement « douces » (peu de variations) au début et à la fin.

    Une courbe de Bézier cubique se définit par quatre points P0, P1, P2, et P3. P0 et P3 correspondent respectivement au début et à la fin de la courbe. En CSS, ces points sont fixes car les coordonnées des points expriment des ratios. P0 est donc (0, 0) (instant initial et état initial) et P3 est (1, 1) (instant final et état final).

    Tous les courbes de Bézier cubiques ne peuvent pas être utilisées comme des fonctions de temporisation. Certaines de ces courbes ne sont pas des fonctions mathématiques (c'est-à-dire des courbes qui n'ont qu'une valeur pour une abscisse donnée). P0 et P3 sont fixés par la définition CSS et une courbe de Bézier cubique est donc uniquement valide si et seulement si les abscisses des points P1 et P2 sont toutes les deux comprises dans l'intervalle [0, 1].

    Les courbes de Bézier cubiques pour lesquelles les ordonnées de P1 et/ou P2 sont situées en dehors de l'intervalle [0, 1] génèreront un effet de rebondissement.

    Lorsqu'on