{"id":378042,"date":"2024-01-15T11:20:08","date_gmt":"2024-01-15T19:20:08","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=378042"},"modified":"2024-05-29T11:27:37","modified_gmt":"2024-05-29T18:27:37","slug":"basic-view-transition","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/basic-view-transition\/","title":{"rendered":"Basic Multi-Page View Transition"},"content":{"rendered":"\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@view-transition {\n  navigation: auto;\n}<\/code><\/pre>\n\n\n\n<p>That goes right in your stylesheet and it&#8217;s the most basic of basic <a href=https://css-tricks.com/"https:////developer.chrome.com//docs//web-platform//view-transitions///" rel=\"noopener\">view transitions<\/a>. The effect is a cross-fade between two pages.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=https://css-tricks.com/"https:////css-tricks.com//wp-content//uploads//2024//05//simple-view-transition.mp4/"><\/video><\/figure>\n\n\n\n<p>The Chrome team had initially released a meta tag we could plop into the <code>&lt;head><\/code> to opt into view transitions:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;meta name=\"view-transition\" content=\"same-origin\" \/><\/code><\/pre>\n\n\n\n<p>That was a temporary way to access view transitions, but then the Chrome team <a href=https://css-tricks.com/"https:////io.google//2024//explore//8ae18b72-028e-4722-9a05-4a480048e629///" rel=\"noopener\">shipped an update in May 2024 that enables multi-page view transitions by default<\/a> and only requires us to opt into them with the CSS snippet above.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>That goes right in your stylesheet and it&#8217;s the most basic of basic view transitions. The effect is a cross-fade [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[19073],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/378042"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=378042"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/378042\/revisions"}],"predecessor-version":[{"id":378364,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/378042\/revisions\/378364"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=378042"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=378042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}