Animation

Morphing icon toggle

Une petite icône transforme continuellement son contour entre deux formes et deux couleurs sur une boucle régulière.

Sync

Build

Utiliser Morphing icon toggle

Une petite icône transforme continuellement son contour entre deux formes et deux couleurs sur une boucle régulière.

Testez l’aperçu avec la souris et le clavier, puis vérifiez la visibilité du focus et la mise en page sur un écran étroit. Indiquez le numéro ou l’identifiant du composant à votre agent de programmation.

Propriétés: intervalSeconds, colorOne, colorTwo

Quels frameworks sont disponibles ?

Le catalogue propose ces versions : react, vue, svelte, astro, html. L’aperçu de cette page utilise React.

Comment accéder à l’implémentation ?

Le code, les versions et les commandes d’installation sont disponibles dans le panneau ci-dessus.

Connectez votre agent

Composants proches

2170Icon Shape MorphAnimationUne seule icône remplie se transforme en douceur en l'icône suivante dans une séquence, le contour se déformant continuellement entre les formes plutôt que par un fondu enchaîné ou un échange.

1766Color blend compareAnimationDeux échantillons bouclent entre la même paire de couleurs, l'un mélangé avec des valeurs de canal brutes et l'autre avec une lumière linéaire, montrant le creux provoqué par une transition simple.

1782Keyframe morph loopAnimationUn carré qui exécute une routine en boucle consistant à grandir, tourner et arrondir en cercle, en se tenant à chaque pose car les arrêts de timing sont inégaux.

2192Morphing icon loopAnimationUne seule icône remplie se remodèle continuellement en icône suivante dans une courte liste, son contour s'écoulant doucement d'une silhouette à l'autre tandis que sa couleur de remplissage change pour correspondre.

1791Orbiting badgesAnimationPetits badges répartis uniformément autour d'une ou deux pistes circulaires, chaque anneau tournant à sa propre vitesse et direction tandis que les badges restent droits.

1792Path followerAnimationUne tuile arrondie qui parcourt une piste en spirale enroulée tandis que la piste elle-même passe devant elle, puis revient au début.