Shape Morph Transition
Une seule forme de 80 px qui passe du cercle au blob, puis au carré arrondi et revient, en tournant d'un tour et en respirant de 0,9 à 1,1 : huit rayons de border-radius interpolés (syntaxe avec « / »), boucle de 6 s — CSS pur, zéro JavaScript, cercle immobile si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Transitions comprend 52 effets, dont 9 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .md-morph-stage (300 px de haut au minimum, fond #0a0a0f) centre .md-shape-morph, qui contient la forme .md-morph-shape : 80 × 80 px, dégradé indigo vers cyan (#6366f1 → #06b6d4), border-radius: 50% au repos. Elle joue en boucle mdMorphShape, 6 s, ease-in-out, en cinq étapes : 0 % cercle ; 25 % blob 30% 70% 70% 30% / 30% 30% 70% 70%, tourné de 90° et agrandi à 1,1 ; 50 % carré aux coins de 10 %, tourné de 180° et réduit à 0,9 ; 75 % le blob inverse 70% 30% 30% 70% / 70% 70% 30% 30%, à 270° et 1,1 ; 100 % retour au cercle après un tour complet.
Le secret de la forme organique est la barre oblique : avant elle, les rayons horizontaux des quatre coins ; après, les rayons verticaux. Huit valeurs indépendantes donnent des coins elliptiques, plus seulement ronds, et le navigateur interpole chacune séparément entre deux étapes : la forme passe d'un état à l'autre sans saut, sans SVG ni JavaScript. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : quatre formes différentes relevées à 0,7 s d'intervalle, rayon du coin haut-gauche à 39 % vers 0,8 s. La rotation et l'échelle passent par transform, calculé sans recalcul de mise en page ; le border-radius demande de repeindre la forme à chaque image, ce qui reste léger pour un élément de cette taille.
L'effet est une boucle : il dit « ça se transforme, ça vit, ça chauffe » tant que dure l'état. Pour une transition qui s'arrête sur une forme précise, figez la keyframe à l'étape voulue (voir la FAQ), comme le font les trois exemples. Le cadre a sa propre classe, préfixée comme le reste de l'effet : deux effets de la bibliothèque collés sur la même page ne se réécrivent pas.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, l'animation est retirée et la forme reste un cercle immobile (leborder-radius: 50%de base). Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : animationnone, rayon de 50 %, aucune transformation. - Arrêt : la boucle tourne sans fin. Un mouvement de plus de 5 secondes doit pouvoir s'arrêter : réservez l'effet à un état qui dure peu (une chauffe, une analyse), figez-le quand l'état change, ou ajoutez un bouton pause qui pose
animation-play-state: paused. - Sens : la forme est un
divvide. Si son aspect porte une information (rond = verre, carré = papier), écrivez-la aussi en texte : la forme seule ne se lit ni au lecteur d'écran ni par tout le monde. - Contenu dans la forme : tout ce que vous mettez dedans tourne avec elle (un tour complet par cycle) et devient illisible. Placez texte ou visage dans un calque frère, posé par-dessus, comme la mascotte de l'exemple 2.
Compatibilité navigateur
CSS pur (@keyframes, border-radius à huit valeurs, transform), 1,2 Ko, zéro JavaScript. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : même transformation, même cercle immobile sous mouvement réduit. L'animation de border-radius avec la syntaxe « / » est lue par tous les navigateurs actuels.
Sans animations CSS, la forme reste un cercle immobile en dégradé indigo-cyan : l'élément se voit, seule la transformation manque.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="md-morph-stage">
<div class="md-shape-morph">
<div class="md-morph-shape"></div>
</div>
</div>Le code complet HTML + CSS + JS de Shape Morph Transition, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Formes (CSS — border-radius à chaque étape) |
cercle / blob / carré à 10 % / blob inverse | 50% 50% 50% 50% / 60% 60% 40% 40% donne un œuf ; 0 un vrai carré. Gardez des pourcentages à toutes les étapes pour que l'interpolation reste douce. |
Rotation et respiration (CSS — transform) |
un tour complet, échelle 0,9 à 1,1 | Retirez rotate() pour une forme qui se déforme sur place (utile si elle contient du texte) ; scale(1.2) accentue la respiration. |
Durée (CSS — 6s) |
6 s par cycle | 3 s pour une transformation vive ; 10 s pour un fond qui vit sans attirer l'œil. Chaque étape dure un quart du cycle. |
Figer sur une forme (CSS — animation-delay négatif + paused) |
aucun : boucle infinie | animation-delay: -3s; animation-play-state: paused fige exactement le carré (50 % de 6 s) ; -1.5s le blob. Retirez paused pour repartir de là. |
Taille et couleur (CSS — .md-morph-shape) |
80 × 80 px, dégradé #6366f1 → #06b6d4 |
Les rayons étant en pourcentages, la forme garde ses proportions à toutes les tailles. Un fond radial donne du volume, un box-shadow coloré un halo. |
FAQ
animation-delay: -3s; animation-play-state: paused place l'animation à 3 s de son cycle de 6 s, soit exactement l'étape 50 % (le carré), et l'y tient. -1.5s donne le blob, 0s le cercle. Pour passer d'une forme à l'autre en douceur, laissez tourner l'animation et posez paused au bon moment, comme les exemples de cette page.clip-path: path() ou un morphing SVG, avec des chemins de même structure.rotate() de la keyframe (la forme se déforme sur place, le texte reste droit), ou poser le contenu dans un élément frère positionné par-dessus la forme, qui ne tourne pas. L'exemple de la mascotte garde ainsi ses yeux à l'endroit pendant que le corps fait son demi-tour.
