`Interpolate-size` - Propriété CSS

interpolate-size

Résumé des caractéristiques de la propriété `interpolate-size`

Description rapide

Définit si les animations ou les transitions doivent être brutales ou progressives lorsqu'un mot clé définissant une dimension intrinsèque est utilisé.

Statut

Problèmes de compatibilité ⚠

S'applique à

Tous les éléments

Valeurs prédéfinies

numeric-only | allow-keywords

Pourcentages

Ne s'appliquent pas.

Valeur initiale

numeric-only

Héritée par défaut

Oui.

Type d'animation

Not animable : la propriété interpolate-size ne peut pas être animée.

Ordre canonique

Single : valeur unique (l'ordre n'intervient pas).

Module W3C

Module CSS - Valeurs et unités

Références (W3C)

CSS Values and Units Module Level 5

Statut du document: WD (document de travail)

Schéma de la syntaxe de `interpolate-size`.

Schéma syntaxique de la propriété interpolate-size.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété `interpolate-size`.

⚠

Cette propriété interpolate-size est encore trop peu reconnue. A utiliser avec beaucoup de précautions.

interpolate-size définit si, lors d'une animation ou d'une transition, les mots clés de dimensionnement intrinsèques, tels que auto, min-content, etc. peuvent être animés de façon progressive. Par défaut, la plupart des navigateurs animent la propriété de façon brutale dès que l'une de ses valeurs est présente dans une animation.

⚠ Si vous ne voyez pas de différences entre les deux cadres ci-dessous, c'est que votre navigateur n'est pas compatible avec la propriété interpolate-size.

interpolate:numeric-only;
Ou règle absente.

interpolate:allow-keywords;

Remarque : Pour que l'animation puisse être rendue progressive, il faut que, dans chaque segment de l'animation, l'une des valeurs soit numérique.


		@keyframes demo1 {
		   from {width: min-content;}
		   50% {width: fit-content;}
		   to {width: 100%;}
		}

Le premier segment ne comprend pas de valeur numérique.


		@keyframes demo1 {
		   from {width: min-content;}
		   50% {width: 100px;}
		   to {width: max-content;}
		}

Tous les segments comportent une valeur numérique.

Attention ! Le changement de la valeur interpolate-size n'est pris en compte que lorsque l'animation est arrêtée. Voir pour cela la propriété animation-play-state.

Valeurs pour `interpolate-size`.

interpolate-size: numeric-only;

C'est le comportement par défaut adopté par chacun des navigateurs. Les animations se font de façon brutale lorsque un mot clé correspondant à une dimension intrinsèque figure dans l'un des segments de l'animation.

Démonstration pour numeric-only
interpolate-size: allow-keywords;

Les animations sont rendues progressives même lorsqu'un mot clé indiquant une dimensions intrinsèque figure dans l'animation. Ces mots clé sont auto, min-content, fit-content, max-content.

⚠ Tous les navigateurs ne traitent pas cette propriété. Si vous ne voyez pas de différence avec les cadres ci-dessus, c'est probablement que votre navigateur n'est pas compatible.

Démonstration pour allow-keywords
interpolate-size: initial; (numeric-only) interpolate-size: inherit; interpolate-size: revert; interpolate-size: revertLayer; interpolate-size: unset;

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de `interpolate-size`.

La propriété interpolate-size ne peut pas être animée.

Exemple interactif avec la propriété `interpolate-size`.

Pour que le fonctionnement de interpolate-size soit correct, nous arrêtons l'animation, avec animation-play-state, puis nous changeons la valeur de interpolate-size avant de relancer l'animation.

interpolate-size :

numeric-only

allow-keywords

Cet exemple est animé entre une valeur numérique et la valeur max-content.

Compatibilité des navigateurs avec `interpolate-size`.

Les navigateurs tels que Firefox ou Safari ne reconnaissent pas encore cette propriété interpolate-size. Utilisez la avec précaution.

Colonne 1

Prise en charge par les navigateurs de la propriété interpolate-size, qui définit si les animations et transitions doivent interpoler entre une valeur numérique et une constante telle que auto ou fit-content.

Propriété
interpolate-size

Estimation de la prise en charge globale.

71%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu 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

Opéra mini

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

Caniuse

Histoire de la propriété `interpolate-size`.

Module CSS - Valeurs et unités - Niveau 5

Concernant interpolate-size. Introduction de la propriété interpolate-size dans le niveau 5 de la spécification.

03 Septembre 2024
Document de travail.

Autres valeurs et unités.

Curieusement, la propriété interpolate-size est décrite dans le module module CSS - Valeurs et unités (on pouvait s'attendre à la trouver dans le module relatif aux animations).

Propriétés :

Interpolate-size

Définit si les animations ou les transitions doivent être brutales ou progressives lorsqu'un mot clé définissant une dimension intrinsèque est utilisé.

Fonctions :

abs()

Calcule la valeur absolue d'un nombre.

acos()

Calcule l'angle dont le cosinus vaut la valeur indiquée.

asin()

Calcule l'angle dont le sinus vaut la valeur indiquée.

atan()

Calcule l'angle dont la tangente vaut la valeur indiquée.

atan2()

Calcule l'angle entre l'axe des abscisses et la droite reliant le point origine au point indiqué.

attr()

Renvoie la valeur d'un attribut (standard ou personnalisé) du code HTML ou XML.

calc()

Effectue un calcul. Peut être utilisé à la place d'une valeur pour une propriété.

⚠

calc-size()

calc-size() permet de faire des calculs sur la dimension intrinsèque d'un élément (définie par le contenu).

clamp()

Calcule une valeur entre deux valeurs extrêmes. Cette fonction est intéressante lorsque les unités des paramètres sont différentes, mais de même nature (dimensions, angle...).

cos()

Calcul le cosinus d'un angle.

exp()

Calcule l'exponentielle d'un nombre.

hypot()

Calcule la racine carrée d'une somme de carrés de nombres.

⚠

if()

Cette fonction permet de sélectionner une valeur parmi une liste proposée, chaque valeur étant associée à une condition.

log()

Calcule le logarithme d'un nombre.

max()