Les View Transitions r\u00c3\u00a9volutionnent les animations entre pages et \u00c3\u00a9tats. D\u00c3\u00a9couvrez comment cr\u00c3\u00a9er des effets de morphing fluides et des transitions cin\u00c3\u00a9matiques avec cette nouvelle API CSS.<\/p>\n

Level :<\/strong> Interm\u00c3\u00a9diaire<\/p>\n

Dur\u00c3\u00a9e :<\/strong> 30 minutes<\/p>\n<\/div>\n

Introduction to View Transitions<\/h2>\n
La View Transitions API permet de cr\u00c3\u00a9er des transitions anim\u00c3\u00a9es entre deux \u00c3\u00a9tats du DOM ou entre deux pages, le tout de mani\u00c3\u00a8re native et performante.<\/p>\n
Pourquoi c’est r\u00c3\u00a9volutionnaire<\/h3>\n
\n
Native<\/strong> : pas de librairie JavaScript n\u00c3\u00a9cessaire<\/li>\n
High-performing<\/strong> : optimized by the browser<\/li>\n
Simple<\/strong> a few lines of CSS are enough<\/li>\n
Progressive<\/strong> : fonctionne m\u00c3\u00aame sans support (graceful degradation)<\/li>\n<\/ul>\n
Page transitions (MPA)<\/h2>\n
Basic activation<\/h3>\n
To enable page transitions in a typical multi-page website:<\/p>\n
\/* In your CSS *\/ @view-transition { navigation: auto; }<\/code><\/pre>\nDefault animation<\/h3>\nPar dfaut, un fondu encha\u00c3\u00aen\u00c3\u00a9 (cross-fade) est appliqu. Vous pouvez le personnaliser :<\/p>\n ::view-transition-old(root) { animation: 300ms ease-out fade-out; } ::view-transition-new(root) { animation: 300ms ease-in fade-in; } @keyframes fade-out { to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } }<\/code><\/pre>\nTransitions nomm\u00c3\u00a9es (morphing)<\/h2>\n The concept<\/h3>\nEn attribuant le m\u00c3\u00aame nom de transition \u00c3\u00a0 deux \u00c3\u00a9l\u00c3\u00a9ments (un sur chaque page), le navigateur cr\u00c3\u00a9e automatiquement une animation de morphing en\u00c3\u00aatre eux.<\/p>\n Exemple : carte vers page d\u00c3\u00a9tail<\/h3>\n\/* Sur la page liste *\/\n.card-image {\n view-transition-name: hero-image;\n}\n\n\/* Sur la page d\u00c3\u00a9tail *\/\n.hero-image {\n view-transition-name: hero-image;\n}<\/code><\/pre>\nL’image \u00ab\u00a0vole\u00a0\u00bb d’une position \u00c3\u00a0 l’autre avec un redimensionnement fluide.<\/p>\n JavaScript Transitions (SPA)<\/h2>\n API startViewTransition<\/h3>\nFor Single Page Applications, use the JavaScript API:<\/p>\n documen\u00c3\u00a9t.startViewTransition(async () => {\n \/\/ Modifier le DOM ici\n await updateContent();\n});<\/code><\/pre>\nContr\u00c3\u00b4le avanc\u00c3\u00a9<\/h3>\nconst transition = documen\u00c3\u00a9t.startViewTransition(async () => {\n await updateContent();\n});\n\n\/\/ Attendre que la transition soit pr\u00c3\u00aate\nawait transition.ready;\n\n\/\/ Attendre que la transition soit termin\u00c3\u00a9e\nawait transition.finished;<\/code><\/pre>\nEffets de morphing avanc\u00c3\u00a9s<\/h2>\n Animer des propri\u00c3\u00a9t\u00c3\u00a9s sp\u00c3\u00a9cifiques<\/h3>\n::view-transition-old(hero-image), ::view-transition-new(hero-image) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } ::view-transition-old(hero-image) { animation-name: scale-down; } ::view-transition-new(hero-image) { animation-name: scale-up; }<\/code><\/pre>\nTransitions avec d\u00c3\u00a9lai<\/h3>\nCr\u00c3\u00a9ez des effets cin\u00c3\u00a9matiques avec des d\u00c3\u00a9lais d\u00c3\u00a9cal\u00c3\u00a9s :<\/p>\n ::view-transition-group(header) { animation-delay: 0ms; } ::view-transition-group(main-content) { animation-delay: 100ms; } ::view-transition-group(sidebar) { animation-delay: 200ms; }<\/code><\/pre>\nPractical use cases<\/h2>\n Gallery navigation<\/h3>\nImages qui s’agrandissent de la vignette \u00c3\u00a0 la vue plein \u00c3\u00a9cran avec une transition fluide.<\/p>\n Changement de th\u00c3\u00a8me<\/h3>\nfunction toggleTheme() {\n documen\u00c3\u00a9t.startViewTransition(() => {\n document.body.classList.toggle('dark-theme');\n });\n}<\/code><\/pre>\nFiltra\u00c3\u00a2ge de liste<\/h3>\n\u00c3\u00a9l\u00c3\u00a9ments qui se r\u00c3\u00a9organisent avec animations lors du filtra\u00c3\u00a2ge ou du tri.<\/p>\n Accessibilit\u00c3\u00a9 et performance<\/h2>\n Respect prefers-reduced-motion<\/h3>\n@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }<\/code><\/pre>\nPerformance optimizations<\/h3>\n\nThe transitions use GPU compositing<\/li>\n \u00c3\u2030vitez les animations sur des \u00c3\u00a9l\u00c3\u00a9ments trop nombreux<\/li>\n Gardez les dur\u00c3\u00a9es courtes (200-500ms)<\/li>\n Testez sur des appareils r\u00c3\u00a9els<\/li>\n<\/ul>\nBrowser support<\/h2>\n\nChrome\/Ed\u00c3\u00a2ge<\/strong> : support since version 111<\/li>\n Safari<\/strong> : support since Safari 18<\/li>\n Firefox<\/strong> : en cours d’impl\u00c3\u00a9mentation<\/li>\n<\/ul>\nD\u00c3\u00a9tection de fonctionnalit\u00c3\u00a9<\/h3>\nif (documen\u00c3\u00a9t.startViewTransition) {\n \/\/ API support\u00c3\u00a9e\n documen\u00c3\u00a9t.startViewTransition(() => updateDOM());\n} else {\n \/\/ Fallback sans transition\n updateDOM();\n}<\/code><\/pre>\nBest practices<\/h2>\n\nStart simple with the default crossfade.<\/li>\n Ajoutez des transitions nomm\u00c3\u00a9es progressivement<\/li>\n Testez avec reduced-motion activ\u00c3\u00a9<\/li>\n Measure the impact on Core Web Vitals<\/li>\n N’abusez pas des effets (subtilit > spec\u00c3\u00b4t\u00c3\u00a9acl\u00c3\u00a9e)<\/li>\n<\/ol>\nPoints cl\u00c3\u00a9s retenir<\/h2>\n\nView Transitions are native and efficient.<\/li>\n Simple activation with @view-transition for MPAs<\/li>\n view-transition-name cr\u00c3\u00a9e des effets de morphing<\/li>\n L’API JavaScript permet le contr\u00c3\u00b4le fin<\/li>\n Toujours respecter les pr\u00c3\u00a9f\u00c3\u00a9rences utilisateur<\/li>\n<\/ol>\nLoading quiz...<\/span><\/div><\/div>","protected":false},"excerpt":{"rendered":"CSS Avanc\u00c3\u00a9 : View Transitions, Effets de Texte et Nouveaut\u00c3\u00a9s 2026 Les View Transitions r\u00c3\u00a9volutionnent les animations entre pages et \u00c3\u00a9tats. D\u00c3\u00a9couvrez comment cr\u00c3\u00a9er des effets de morphing fluides et des transitions cin\u00c3\u00a9matiques avec cette nouvelle API CSS. Niveau : Interm\u00c3\u00a9diaire Dur\u00c3\u00a9e : 30 minutes Introduction aux View Transitions La View Transitions API permet de … Read More \u00ab\u00a0CSS Avanc\u00e9 : View Transitions, Effets de Texte et Nouveaut\u00e9s 2026\u00a0\u00bb<\/span> »<\/a><\/p>","protected":false},"author":1,"featured_media":227,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,90],"tags":[18,23,26,5,29,27,28,3],"class_list":["post-216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-module-1-fondamentaux-techniques-du-web","category-texte-semantique","tag-accessibility","tag-color","tag-css","tag-design","tag-frontend","tag-html","tag-javascript","tag-ui"],"_links":{"self":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/comments?post=216"}],"version-history":[{"count":2,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/216\/revisions"}],"predecessor-version":[{"id":463,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/216\/revisions\/463"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media\/227"}],"wp:attachment":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media?parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/categories?post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/tags?post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Page transitions (MPA)<\/h2>\n

Transitions nomm\u00c3\u00a9es (morphing)<\/h2>\n

The concept<\/h3>\n
En attribuant le m\u00c3\u00aame nom de transition \u00c3\u00a0 deux \u00c3\u00a9l\u00c3\u00a9ments (un sur chaque page), le navigateur cr\u00c3\u00a9e automatiquement une animation de morphing en\u00c3\u00aatre eux.<\/p>\n

JavaScript Transitions (SPA)<\/h2>\n

Effets de morphing avanc\u00c3\u00a9s<\/h2>\n

Practical use cases<\/h2>\n

Gallery navigation<\/h3>\n
Images qui s’agrandissent de la vignette \u00c3\u00a0 la vue plein \u00c3\u00a9cran avec une transition fluide.<\/p>\n

Filtra\u00c3\u00a2ge de liste<\/h3>\n
\u00c3\u00a9l\u00c3\u00a9ments qui se r\u00c3\u00a9organisent avec animations lors du filtra\u00c3\u00a2ge ou du tri.<\/p>\n

Accessibilit\u00c3\u00a9 et performance<\/h2>\n