`Linear()` - Fonction CSS

linear()

Résumé des caractéristiques de la fonction `linear()`

Description rapide

Définit une fonction d'accélération linéaire, utilisable pour les animations avec animation-timing-function.

Statut

Standard

Type d'animation

Not animable : la propriété linear() ne peut pas être animée.

Module W3C

Module CSS - Fonctions d'accélération

Références (W3C)

🡇

🡅

CSS Easing Functions Level 2

Statut du document: WD (document de travail)

CSS Easing Functions Level 1

Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de `linear()`.

Schéma syntaxique de la fonction linear().
Cliquez sur les termes du diagram pour plus de précision.

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

x est une valeur numérique sans unité.
y est un pourcentage.
Plusieurs valeurs ou paires de valeurs peuvent être énoncées, séparées par des virgules. Il en faut au moins deux.

Description de la fonction `linear()`.

linear() est une fonction d'accélération qui, comme son nom l'indique, est linéaire. Elle peut être utilisée avec animation-timing-function ou transition-timing-function.

linear a tout d'abord été définie comme une valeur (niveau 1 de la spécification), au même titre que ease-in ou ease-out, etc. : la progression était linéaire d'un bout à l'autre de l'animation. Le niveau 2 a ajouté des paramètres : les points de passage. Mais la valeur linear peut toujours être utilisée : elle est équivalente à linear(0, 1).

Exemple pour linear() avec des valeurs uniques

linear(0, 0.2, 1)
Exemple ne comportant que des valeurs uniques.

Exemple pour linear() avec un valeur double (X Y)

linear(0, 0.25 60%, 1)
Exemple comportant une valeur double

La valeur `linear()` peut être utilisée avec les propriétés suivantes :

animation-timing-function : Définit la fonction d'accélération à utiliser pendant une animation.
transition-timing-function : Propriété définissant la fonction d'accélération à utiliser pendant une transition.

Syntaxes de la fonction `linear()`.

<property>: linear;

On rappelle pour mémoire que la fonction linear() peut être utilisée sans paramètre. Il faut alors omettre les parenthèses. La notation est alors équivalente à linear(0, 1).
<property>: linear(0, 0.2, 1);

Une série de valeurs sans unité, séparées par des virgules. Elles indiquent les valeurs y des points de rupture. Les valeurs x étant réputées régulièrement espacées sur l'axe entre 0 et 1. Il peut y avoir autant de valeurs que nécessaire mais elles doivent être énumérées dans l'ordre croissant.

Ces valeurs ne peuvent pas être des pourcentages. Elles peuvent par contre être inférieures à 0 ou supérieure à 1.

Deux valeurs au moins sont nécessaires à la fonction.

linear(0, 0.2, 1)
<property>: linear(0, 0.75 80%, 1);

Chaque paire de valeurs (entre virgule) correspond à des coordonnées des points de stop. La première valeur correspond à y ; elle peut être inférieure à 0 ou supérieure à 1 mais ce ne peut pas être des pourcentages. La deuxième valeur correspond à x ; ce doit être un pourcentage, et c'est une valeur inférieure à 0% ou supérieure à 100%.

Il est possible, comme c'est le cas sur notre exemple, de mixer la syntaxe précédente (valeurs simples) et cette syntaxe avec des paires de valeurs. Pour faire une syntaxe double avec le 0, pensez bien à écrire linear(0 0%, ...).

linear(0, 0.25 60%, 1)

Exemples d'utilisation de la fonction `linear()`.

Fonction quadratique.

La fonction linear() est particulièrement pratique pour approcher une courbe avec des segments de droite. Voici la fonction y = x² réalisée avec dix segments de droite.

Fonction `1 / x`.

C'est la même chose pour la fonction y = 1/ x. la valeur 0 n'a pas été exprimée pour éviter de créer la valeur infini.

Fonction `y = x³`.

On pourrait décliner les exemples à l'infini. Nos exemples comportent 10 points mais on peut en mettre autant que l'on veut.

Animation avec la fonction `linear()`.

La fonction linear(), ne pouvant être utilisée que avec des propriétés servant à déclarer des animations, ne peut pas être animée.

Support de la fonction `linear()`.

Colonne 1

Support des navigateurs pour la fonction linear() qui définit une courbe d'accélération linéaire pour les propriétés animation-timing-function et transition-timing-function.

Fonction
linear()

Estimation de la prise en charge globale.

88%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Samsung Internet

Chrome

Edge

Safari

Opéra

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

Firefox

KaiOS Browser

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction `linear()`.

Module CSS - Fonctions d'accélération - Niveau 1

Définition de linear comme une valeur (pas de paramètres) donnant simplement une fonction d'accélération linéaire.

21 Février 2017
Document de travail.
30 Avril 2019
Candidat à la recommandation.
Module CSS - Fonctions d'accélération - Niveau 2

Ajout de paramètres pour linear(), ce qui en fait une fonction.

29 Août 2024
Document de travail.

Voir aussi : autres fonctions d'accélération.

Fonctions :

cubic-bezier()

Détermine, à partir de 4 paramètres, une progression non linéaire pour les animations.

Linear()

Définit une fonction d'accélération linéaire, utilisable pour les animations avec animation-timing-function.

steps()

Il s'agit d'une fonction d'accélération, qui définit une progression saccadée, pas par pas.

Linear() - Fonction CSS

Résumé des caractéristiques de la fonction linear()

Schéma syntaxique de linear().

Description de la fonction linear().

La valeur linear() peut être utilisée avec les propriétés suivantes :

Syntaxes de la fonction linear().

Exemples d'utilisation de la fonction linear().