CSS: transition

.instui-transition.-transition-fade-entering — Classes d'état d'animation pour le composant Transition — .instui-transition et classes d'état (-transition-fade-entering, -transition-scale-exited, etc.) — utilisables seules ou chaînées à n'importe quel composant.

Source: transition.css

Utilisation

@import "@pantoken/components/utilities.css";

Exemples

<div class="instui-transition -transition-fade-entering">Contenu animé</div>

Modificateurs

Modificateur	Description
.-transition-*	Type de transition / classe d'état basculée par l'exécution (fade|scale|slide-* + entering|entered|exiting|exited).
.-transition-fade-entered	—
.-transition-fade-entering	—
.-transition-fade-exited	—
.-transition-fade-exiting	—
.-transition-scale-entered	—
.-transition-scale-entering	—
.-transition-scale-exited	—
.-transition-scale-exiting	—
.-transition-slide-down-entered	—
.-transition-slide-down-entering	—
.-transition-slide-down-exited	—
.-transition-slide-down-exiting	—
.-transition-slide-left-entered	—
.-transition-slide-left-entering	—
.-transition-slide-left-exited	—
.-transition-slide-left-exiting	—
.-transition-slide-right-entered	—
.-transition-slide-right-entering	—
.-transition-slide-right-exited	—
.-transition-slide-right-exiting	—
.-transition-slide-up-entered	—
.-transition-slide-up-entering	—
.-transition-slide-up-exited	—
.-transition-slide-up-exiting	—

Propriétés personnalisées

Propriété	Type	Défaut	Description
--duration	<time>	300ms	Durée de l'animation (par défaut 300ms) ; remplacer pour accélérer ou ralentir chaque état de transition.
--timing	*	ease-in-out	Fonction de synchronisation de l'animation (par défaut ease-in-out).