Fonction CSS linear()

Syntaxe

linear(0, 1)
linear(0, 0.25, 1)
linear(0, 0.25 75%, 1)
linear(0, 0.5 25% 75%, 1)

Paramtres

La fonction accepte deux valeurs ou plus parmi les suivantes, qui reprsentent des points de progression dans la chronologie de l'animation :

<number>

Reprsente un point dans le temps sur la dure de l'animation ou de la transition. Au moins deux valeurs doivent tre dfinies. La valeur 0 reprsente le dbut de la transition, et 1 la fin. Les valeurs en dehors de l'intervalle 0 1 sont galement autorises.

<percentage> Facultatif

Indique quel moment la progression <number> est atteinte pendant la chronologie de l'animation. Elle peut tre dfinie aprs n'importe quelle valeur <number> sauf la premire et la dernire, et peut en prendre jusqu' deux. Si deux valeurs de pourcentage sont dfinies, elles dfinissent la longueur de l'arrt : la premire indique le point de dpart et la seconde le point d'arrive pour ce segment dans l'animation ou la transition. Si aucun <percentage> n'est dfini, les valeurs de progression sont rparties uniformment sur la chronologie.

Description

La fonction linear() permet d'approcher des animations et transitions complexes en interpolant linairement entre les points dfinis. Un usage typique de la fonction linear() consiste fournir de nombreux points pour approcher n'importe quelle courbe.

La fonction linear() cre des transitions o la progression se fait un rythme constant entre les points dfinis. Par exemple, linear(0, 0.25, 1) a des arrts linaires 0, 0.25 et 1. L'animation commence au point 0, progresse linairement jusqu' 0.25, puis continue linairement jusqu' 1. Comme aucun pourcentage n'est dfini, la mme dure (50%) est utilise pour chaque segment, c'est--dire de 0 0.25 puis de 0.25 1.

[Graphiques de la progression d'entre vers la progression de sortie, o linear(0, 0.25, 1) montre une ligne brise reliant l'origine, (0.5, 0.25) et (1, 1) ; et linear(0, 0.25 75%, 1) montre une ligne brise reliant l'origine, (0.75, 0.25) et (1, 1).]

Par dfaut, les arrts sont quidistants. Par exemple, s'il y a cinq arrts, ils ont lieu 0%, 25%, 50%, 75% et 100% de la dure. Vous pouvez utiliser des valeurs de pourcentage optionnelles pour un contrle plus fin, en dfinissant quand chaque valeur de progression doit se produire et en permettant une progression plus contrle de la transition.

Considrons une animation d'une dure de 100 secondes et d'un dplacement de 100 pixels. Supposons que l'assouplissement de l'animation soit dfini comme linear(0, 0.25 75%, 1). Dans ce cas, l'animation progresse jusqu' 25 pixels (25% du changement total) pendant les 75 premires secondes (75% de la dure). Les 75 pixels restants sont appliqus pendant les 25 secondes restantes de l'animation.

Pour la mme animation, si la fonction d'assouplissement est dfinie comme linear(0, 0.5 25% 75%, 1), l'animation atteint 50 pixels (50% du changement total) en 25 secondes (25% de la dure) et y reste pendant 50 secondes (75% - 25% de la dure). Les 50 derniers pixels sont appliqus pendant les 25 secondes restantes. Notez que linear(0, 0.5 25% 75%, 1) est quivalent linear(0, 0.5 25%, 0.5 75%, 1).

Syntaxe formelle

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

Exemples

Utilisation de la fonction linear()

Les fonctions linear() suivantes sont valides en CSS :

/* Trois points de progression rpartis uniformment */
linear(0, 0.25, 1)

/* Chronologie personnalise avec des valeurs de pourcentage */
linear(0, 0.5 25% 75%, 1)

Les dfinitions linear() suivantes sont invalides :

/* Au moins deux paramtres sont requis */
linear(0.5)

/* Les pourcentages doivent tre en ordre croissant */
linear(0, 0.25 80%, 0.5 60%, 1)

/* Les valeurs doivent tre des nombres */
linear(start, middle, end)

Spcifications

Compatibilit des navigateurs

Voir aussi

• Autres fonctions d'assouplissement : cubic-bezier() et steps()
• Le module des fonctions d'assouplissement CSS
• Gnrateur d'assouplissement linear() (angl.) par Jake Archibald