jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit View Transition Builder

Generate View Transitions API CSS and JavaScript for smooth page and element transitions. Same-document (SPA) and cross-document (MPA) support with reduced-motion fallback.

Chargement de l'outil...

Qu'est-ce que View Transition Builder ?

L'API View Transitions cree des transitions animees fluides lors de la navigation entre les pages ou de la mise a jour du contenu de la page. Le navigateur capture des instantanes des etats ancien et nouveau, puis effectue un fondu enchevetre entre eux. Vous pouvez assigner view-transition-name a des elements specifiques pour les animer independamment pendant la transition. Pour les transitions dans un meme document (SPA), utilisez document.startViewTransition(). Pour les transitions entre documents (MPA), ajoutez une balise meta.

Réponse rapide

Utilisez l'API View Transitions pour des animations fluides de page et d'elements. Pour les SPA : document.startViewTransition(() => updateDOM()). Pour les MPA : ajoutez <meta name="view-transition" content="same-origin"> dans l'en-tete. Assignez view-transition-name aux elements pour une animation independante. Respectez toujours prefers-reduced-motion.

Last updated: 2026-05-28

Limites

  • Les transitions entre documents (MPA) fonctionnent uniquement entre pages de meme origine. La navigation inter-origine ne declenche pas de transition de vue, meme avec la balise meta.
  • Le navigateur capture des instantanes statiques des etats ancien et nouveau. Le contenu en direct comme les videos, animations ou elements en mise a jour continue peut sembler fige pendant la transition.
  • View Transitions est Baseline 2025 : Chrome 111+, Edge 111+, Safari 18.2+. Le support Firefox est en developpement. Les navigateurs non compatibles naviguent sans animation — la fonctionnalite se degrade graceusement.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Choisissez le type de transition : meme document (pour les mises a jour de contenu SPA) ou entre documents (pour la navigation de page MPA).
  2. Definissez la duree d'animation, l'acceleration et le view-transition-name pour les elements qui doivent s'animer independamment.
  3. Personnalisez optionnellement les pseudo-elements ::view-transition-new et ::view-transition-old.
  4. Copiez le CSS et le JavaScript/la balise meta. Activez le fallback prefers-reduced-motion pour l'accessibilite.

A quoi il sert

  • Animer une image hero entre une page de liste et une page de detail en utilisant le meme view-transition-name sur les deux pages.
  • Ajouter un fondu enchevetre fluide lors de la navigation entre les pages d'un site statique en ajoutant la balise meta view-transition.
  • Animer un filtre de galerie : appelez startViewTransition() avant de mettre a jour la grille d'images pour un changement de mise en page fluide.

Cas d'usage

Exemples concrets

Exemple

Morphing d'image hero entre pages

Un blog a une image hero sur la page de liste et une version plus grande sur la page d'article. Donnez aux deux images le meme view-transition-name: hero-image. Le navigateur anime l'image de sa position dans la liste a la position dans l'article pendant la navigation.

Exemple

Echange de contenu SPA

Un tableau de bord filtre un tableau de donnees. Encapsulez la mise a jour du filtre dans document.startViewTransition(() => updateTable()). Les anciennes lignes du tableau disparaissent tandis que les nouvelles apparaissent — aucun code d'animation manuel necessaire.

Erreurs frequentes

  • Donner a deux elements le meme view-transition-name sur la meme page — les noms doivent etre uniques par page. Le navigateur genere une erreur et ignore la transition.
  • Oublier la balise meta dans l'en-tete de la page pour les transitions MPA — les transitions entre documents ne fonctionnent pas sans elle.
  • Ne pas gerer prefers-reduced-motion — les utilisateurs sensibles aux mouvements devraient obtenir des transitions instantanees au lieu d'animations.

Vérification

  1. Testez la transition en naviguant entre les pages ou en declenchant la mise a jour de contenu et en observant l'animation.
  2. Verifiez que prefers-reduced-motion: reduce desactive la transition et affiche un echange de contenu instantane.

FAQ

Questions sur View Transition Builder

Puis-je animer des elements specifiques au lieu de toute la page ?

Oui. Assignez view-transition-name a des elements individuels (comme .hero img ou .card). Chaque element nomme obtient ses propres pseudo-elements ::view-transition-old() et ::view-transition-new() que vous pouvez animer independamment. Les elements sans view-transition-name participent au fondu enchevetre racine.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi