Transitions & Animations
Transitions de page, view transitions, thème et animations d'entrée/sortie.
Fade Through
La page s'efface progressivement vers le noir puis revele la nouvelle page.
Slide Over
Le nouveau contenu glisse par-dessus l'ancien de gauche a droite.
Circle Reveal
Un cercle s'agrandit depuis le centre pour reveler la nouvelle page.
Curtain Open
Deux panneaux s'ouvrent comme des rideaux de theatre.
Diagonal Wipe
Une ligne diagonale balaye l'ecran pour reveler le nouveau contenu.
Pixelate Dissolve
L'ecran se decompose en pixels qui apparaissent et disparaissent.
Flip Page
La page se retourne comme dans un livre.
Zoom Through
Zoom vers le centre de l'ecran puis zoom arriere sur la nouvelle page.
Blinds Effect
Des stores horizontaux se ferment puis s'ouvrent pour reveler la nouvelle page.
Morph Transition
Une forme se transforme et s'agrandit pour couvrir l'ecran puis retrecit.
Crossfade Transition
Fondu enchaine fluide entre deux etats. Simule le crossfade natif de la View Transitions API.
Slide Transition
Le contenu glisse vers la gauche tandis que le nouveau contenu arrive par la droite, comme une navigation entre pages.
Scale Morph
L'element change de taille, de forme et de couleur avec une courbe d'animation elastique.
Shared Element
Un element partage se deplace d'une position a l'autre, imitant la transition d'element partage de l'API.
Fade & Slide Up
Le contenu sort en fondu vers le haut et le nouveau contenu monte depuis le bas. Ideal pour les profils et cartes.
Flip Transition
La carte effectue une rotation 3D pour reveler un contenu different au verso. Effet classique et elegant.
Zoom Transition
Effet de zoom avant qui agrandit la vue pour passer a un nouvel etat detaille. Parfait pour les galeries.
Circular Reveal
Le nouveau contenu se revele avec un cercle qui s'agrandit via clip-path. Ideal pour les bascules de theme.
Stagger List
Les elements de liste sortent un par un avec des delais decales, puis les nouveaux elements apparaissent progressivement.
Page Turn
Simule un effet de page qui tourne en 3D pour reveler la page suivante. Inspire des liseuses et livres numeriques.
Dark Mode
Thème sombre actif
Light Mode
Thème clair actif
Circular Reveal
Toggle de thème avec révélation circulaire via clip-path: circle() depuis le bouton en haut à droite.
Mode Sombre
Cliquez pour un fondu doux vers le thème clair
Mode Clair
Cliquez pour revenir au thème sombre
Smooth Fade
Transition entre thèmes par fondu croisé d'opacité avec morphing d'icône soleil/lune.
Wipe Transition
Glissement latéral
Wipe Transition
Glissement latéral
Slide Wipe
Balayage horizontal avec clip-path: inset() et ligne de séparation lumineuse qui traverse l'écran.
CSS Variables
Transition via custom properties
Color Morph
Transition de thème entièrement pilotée par CSS custom properties avec transition sur chaque variable.
Icon Toggle
Bouton de thème avec morphing rotatif entre les icônes soleil et lune. Rotation et scale combinés.
Cliquez sur cette carte pour basculer entre thème sombre et clair avec des transitions fluides.
Card Theme
Carte complète avec avatar, texte et boutons dont chaque élément transitionne entre les deux thèmes.
Gradient Shift
Cliquez pour changer l'ambiance
Gradient Shift
Fond gradient qui passe de teintes froides nocturnes à des tons chauds dorés en 0.8s.
Adaptive UI
Interface miniature complète (nav, contenu, blocs) qui bascule entre thème sombre et clair au clic.
Composant
Composant
Split Compare
Comparaison côte-à-côte des deux thèmes avec séparateur lumineux central et label « VS ».
Pixel Transition
Cliquez pour pixeliser
Dark ModePixel Transition
Cliquez pour pixeliser
Light ModePixelate Transition
Transition pixelisée : des blocs colorés apparaissent en cascade aléatoire pour révéler le nouveau thème.
Popover Bloom
L'element s'ouvre en fleur depuis son point d'ancrage avec scale + opacity via @starting-style.
Dialog Curtain
Modal qui s'ouvre comme des rideaux de scene, se separant depuis le centre.
Stage Curtain Dialog
Le contenu apparait apres l'ouverture des rideaux.
Toast Cascade
Notifications toast empilees avec entree fluide, reordonnancement et sortie gracieuse.
Card Vanish
La carte se dissout en particules au retrait et se materialise depuis les particules a l'entree.
List Item Slide
Les elements glissent depuis le cote avec delais echelonnes et se replient a la suppression.
Accordion Fold
Sections de contenu qui se plient/deplient comme du papier avec transformations 3D perspective.
Morph Transition
L'element morphe de forme/position en passant de display:none a display:block avec allow-discrete.
Portal Open
Le contenu apparait a travers un masque circulaire en expansion, comme un portail qui s'ouvre.
Flip Card Entry
Les elements pivotent depuis la face arriere avec rotation 3D pour reveler le contenu.
Fade Through Color
Les elements passent par une couleur de marque (pas juste l'opacite) lors de l'entree/sortie.
Motion Design
Staggered Reveal
Elements apparaissant en cascade avec un delai progressif pour un effet coordonne.
Elastic Spring
Animation ressort avec rebond physique et deformation elastique realiste.
Orchestrated Motion
Animation coordonnee multi-elements type After Effects avec timing synchronise.
Kinetic Wave
Propagation d'onde a travers une grille de points avec delai progressif.
Inertia Momentum
Mouvement avec inertie et deceleration naturelle : glissez le cube et regardez-le ralentir.
SVG Path Follow
Element qui suit un chemin SVG complexe avec une animation fluide le long de la courbe.
Character Cascade
Texte avec animation caractere par caractere, chaque lettre apparait individuellement.
3D Flip Sequence
Sequence de flips 3D enchaines avec delai entre chaque carte pour un effet domino.
Shape Morph Transition
Transition fluide entre formes geometriques : cercle, blob organique, carre, et retour.
Timeline Choreography
Sequence timeline multi-etapes synchronisee avec des barres de progression animees.