--- title: A beginner-friendly guide to view transitions in CSS description: The View Transition API enables smooth animated navigation between pages in multi-page applications using just CSS. With the @view-transition at-rule,... canonical: https://daily.dev/posts/a-beginner-friendly-guide-to-view-transitions-in-css-3olqhrnhv twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: A beginner-friendly guide to view transitions in CSS | daily.dev og:description: The View Transition API enables smooth animated navigation between pages in multi-page applications using just CSS. With the @view-transition at-rule,... og:url: https://daily.dev/posts/a-beginner-friendly-guide-to-view-transitions-in-css-3olqhrnhv og:image: https://api.daily.dev/og/posts/3OlQHrnHv.png og:image:alt: A beginner-friendly guide to view transitions in CSS og:image:width: 1200 og:image:height: 630 og:locale: en --- [MDN Blog](https://daily.dev/sources/mdnblog) [Read post](https://api.daily.dev/r/3OlQHrnHv) # [A beginner-friendly guide to view transitions in CSS](https://api.daily.dev/r/3OlQHrnHv "Go to post") The View Transition API enables smooth animated navigation between pages in multi-page applications using just CSS. With the @view-transition at-rule, developers can create seamless page transitions that were previously only possible in single-page applications. The guide demonstrates how to implement basic cross-fade transitions with one line of CSS, then extends to custom slide animations using pseudo-elements like ::view-transition-old and ::view-transition-new. Currently supported in Chrome 126+, Edge 126+, and Safari 18.2+, with Firefox support coming soon. [#webdev](/tags/webdev "Check all #webdev posts")[#css](/tags/css "Check all #css posts")[#frontend](/tags/frontend "Check all #frontend posts")[#html](/tags/html "Check all #html posts") Oct 09, 2025•5m read time•From [developer.mozilla.org](https://api.daily.dev/r/3OlQHrnHv "developer.mozilla.org") [](https://api.daily.dev/r/3OlQHrnHv "Go to post") Table of contents [Quick refresher on MPAs vs SPAs](https://api.daily.dev/r/3OlQHrnHv?a=quick%5Frefresher%5Fon%5Fmpas%5Fvs%5Fspas "Quick refresher on MPAs vs SPAs")[Browser support for view transitions](https://api.daily.dev/r/3OlQHrnHv?a=browser%5Fsupport%5Ffor%5Fview%5Ftransitions "Browser support for view transitions")[Creating your first view transition](https://api.daily.dev/r/3OlQHrnHv?a=creating%5Fyour%5Ffirst%5Fview%5Ftransition "Creating your first view transition")[Going beyond the default transition](https://api.daily.dev/r/3OlQHrnHv?a=going%5Fbeyond%5Fthe%5Fdefault%5Ftransition "Going beyond the default transition")[Wrapping up](https://api.daily.dev/r/3OlQHrnHv?a=wrapping%5Fup "Wrapping up") 6.8K Impressions4 Upvotes Comment Bookmark Copy Share your thoughtsPost [](https://daily.dev/sources/mdnblog) [MDN Blog](https://daily.dev/sources/mdnblog "https://daily.dev/sources/mdnblog") MDN Blog is a platform or publication associated with Mozilla Developer Network (MDN), offering arti... Read more 373 Followers • 2.3K Upvotes #### Would you recommend this post? Copy link WhatsApp Facebook X New Squad Copy linkShare with your friends 4 ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"A beginner-friendly guide to view transitions in CSS","url":"https://daily.dev/posts/a-beginner-friendly-guide-to-view-transitions-in-css-3olqhrnhv","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/a-beginner-friendly-guide-to-view-transitions-in-css-3olqhrnhv"},"datePublished":"2025-10-09T02:38:39.405Z","dateModified":"2025-10-09T02:39:02.694Z","description":"The View Transition API enables smooth animated navigation between pages in multi-page applications using just CSS. With the @view-transition at-rule,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5e54d37ccaaec21a4756690acb1fa5c7?_a=AQAEulh","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5e54d37ccaaec21a4756690acb1fa5c7?_a=AQAEulh","isAccessibleForFree":true,"articleSection":"MDN Blog","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"MDN Blog","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/236034d60b694d00b5fb9a5a5d6b57ae","url":"https://daily.dev/sources/mdnblog"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/a-beginner-friendly-guide-to-view-transitions-in-css-3olqhrnhv","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,css,frontend,html","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"MDN Blog","item":"https://daily.dev/sources/mdnblog"},{"@type":"ListItem","position":3,"name":"A beginner-friendly guide to view transitions in CSS"}]} ```