Générateur de CSS View Transition

Le générateur est un outil gratuit qui vous permet de créer et prévisualiser visuellement des animations de transition de page fluides à l'aide de la View Transition API.

Auparavant, les transitions fluides nécessitaient des bibliothèques JS complexes. Maintenant, vous pouvez le faire avec les fonctionnalités natives du navigateur. Réglez les animations et copiez le code.

Tout le traitement a lieu dans votre navigateur, garantissant une sécurité et une confidentialité totales.

View Transition API

Un mécanisme où le navigateur capture automatiquement des captures d'écran du DOM avant et après un changement, pour les animer de manière transparente.

view-transition-name

Une propriété CSS pour identifier les éléments à animer. Les éléments avec le même nom sont liés.

::view-transition-old / new

`old` est le pseudo-élément pour l'état ancien (sortie). `new` est pour le nouvel état (entrée).

Cross-document View Transitions

Permet les transitions animées entre les pages MPA via des balises meta, sans avoir besoin d'une SPA.

Q.Mes données sont-elles envoyées à un serveur ?

Non, cet outil fonctionne entièrement dans votre navigateur. Aucune donnée n'est envoyée à l'extérieur.

Q.L'animation fonctionnera-t-elle sur tous les navigateurs ?

Elle est supportée sur Chrome 111+, Edge 111+, Safari 18+. Pour les navigateurs non compatibles, cela bascule sur un changement de page instantané sécurisé.

Q.Puis-je l'utiliser pour des MPA (Multi-Page Apps) ?

Oui, avec la balise `<meta name="view-transition" content="same-origin" />` et du CSS, vous pouvez animer des MPA sans JavaScript.

Q.Que dois-je utiliser pour view-transition-name ?

Spécifiez une chaîne unique dans la page. Si le même nom existe en double, l'animation échouera.

Voici des exemples typiques d'implémentation.