{"id":4911,"date":"2022-04-22T02:00:00","date_gmt":"2022-04-22T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/css-page-transitions\/"},"modified":"2024-07-24T20:54:58","modified_gmt":"2024-07-24T18:54:58","slug":"css-page-transitions","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/css-page-transitions\/","title":{"rendered":"19+ Amazing CSS Page Transitions ( With Beautiful Examples! )"},"content":{"rendered":"\n<p>CSS is a great technology that you can use to add amazing styles to a webpage and bring out your creative side as a designer or developer.<\/p>\n\n\n\n<p>One way to add more of a unique and fun feature to your website is CSS page transitions. They can be <strong>pure CSS page transitions<\/strong> or have a little JavaScript to help create some of the more advanced techniques &#8211; either way, you can do so much with just pure CSS.<\/p>\n\n\n\n<p>Let\u2019s jump straight in and check out some amazing CSS page transitions!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-04-22\/collection-pure-css-transitions.jpeg\" alt=\"Collection Of Pure CSS Page Transitions\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>In this list, you will find a mix of pure CSS page transitions and some with a little JavaScript to create some stunning effects, hopefully, one inspires you to create something beautiful with it.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"1.-simple-click-page-transition\">1. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/mdpYaBB\" target=\"_blank\" rel=\"noopener nofollow\">Simple Click Page Transition<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdpYaBB\" data-src=\"\/\/codepen.io\/anon\/embed\/mdpYaBB?height=450&amp;theme-id=1&amp;slug-hash=mdpYaBB&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdpYaBB\" title=\"CodePen Embed mdpYaBB\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/mdpYaBB\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>Based on a few HTML, CSS, and JavaScript frameworks, this example shows you how you can create a stunning event-driven page transition.<\/p>\n\n\n\n<p>Click the \u201cStart\u201d button and watch the effect. You can set this up to go to multiple pages as well but the demo comes with one page only.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"2.-tiles-page-css-transition\">2. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/wvpbRmE\" target=\"_blank\" rel=\"noopener nofollow\">Tiles Page CSS Transition<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvpbRmE\" data-src=\"\/\/codepen.io\/anon\/embed\/wvpbRmE?height=450&amp;theme-id=1&amp;slug-hash=wvpbRmE&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvpbRmE\" title=\"CodePen Embed wvpbRmE\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/wvpbRmE\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>A tiled CSS page transitions effect that can be used to switch between different content.<\/p>\n\n\n\n<p>Click the button in the middle and watch the effect take place, the transition is super smooth and very engaging. You can easily add more elements to the new page as well.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"3.-scaling-css-transition\">3. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/abErPqd\" target=\"_blank\" rel=\"noopener nofollow\">Scaling CSS Transition<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abErPqd\" data-src=\"\/\/codepen.io\/anon\/embed\/abErPqd?height=450&amp;theme-id=1&amp;slug-hash=abErPqd&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abErPqd\" title=\"CodePen Embed abErPqd\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/abErPqd\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>This demo has multiple cool effects going on at once, and they all come together to create a stunning CSS transition when clicked. Hover over the image and it interacts with the movement of the mouse.<\/p>\n\n\n\n<p>Click the image and it scales into view as a larger full-screen image, you could easily change this and add text or additional elements to create more of a page.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"4.-curtain-pure-css-page-transition\">4. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/qBpGLYq\" target=\"_blank\" rel=\"noopener nofollow\">Curtain Pure CSS Page Transition<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBpGLYq\" data-src=\"\/\/codepen.io\/anon\/embed\/qBpGLYq?height=450&amp;theme-id=1&amp;slug-hash=qBpGLYq&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBpGLYq\" title=\"CodePen Embed qBpGLYq\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/qBpGLYq\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>A curtain sliding-based pure CSS transition effect that lets you switch between content, the demo is quite basic and has not much styling to it, but you can easily edit the CSS to change it up.<\/p>\n\n\n\n<p>Very simple and easy to use on your website.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"5.-circular-clip-transition\">5. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/rNpEObo\" target=\"_blank\" rel=\"noopener nofollow\">Circular Clip Transition<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNpEObo\" data-src=\"\/\/codepen.io\/anon\/embed\/rNpEObo?height=450&amp;theme-id=1&amp;slug-hash=rNpEObo&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNpEObo\" title=\"CodePen Embed rNpEObo\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/rNpEObo\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>A super simple transition that creates a beautiful page animation with a circular shape.<\/p>\n\n\n\n<p>This transition example makes use of JavaScript and the Anime.js library and therefore it is not a pure-CSS solution.<\/p>\n\n\n\n<p>But if you don&#8217;t mind the JS, this effect is perfect for transitions between pages on your site.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"6.-full-css-menu-page-transitions\">6. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/WNdBLJL\" target=\"_blank\" rel=\"noopener nofollow\">Full CSS Menu Page Transitions<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNdBLJL\" data-src=\"\/\/codepen.io\/anon\/embed\/WNdBLJL?height=450&amp;theme-id=1&amp;slug-hash=WNdBLJL&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNdBLJL\" title=\"CodePen Embed WNdBLJL\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/WNdBLJL\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>A fully complete CSS and JavaScript-based menu with smooth transitions between pages.<\/p>\n\n\n\n<p>Click the menu buttons and watch the cool transition between each page, you can navigate back home by using the center button, each page has its own color as well but you could easily add a background image if you wanted.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"7.-multi-directional-css-page-transitions\">7. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/GRyaPdQ\" target=\"_blank\" rel=\"noopener nofollow\">Multi-Directional CSS Page Transitions<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRyaPdQ\" data-src=\"\/\/codepen.io\/anon\/embed\/GRyaPdQ?height=450&amp;theme-id=1&amp;slug-hash=GRyaPdQ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRyaPdQ\" title=\"CodePen Embed GRyaPdQ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/GRyaPdQ\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>A super cool and fancy CSS and JavaScript-based page transition demo which slides new content into view.<\/p>\n\n\n\n<p>The animations are really smooth and it is easy to add your own elements or additional pages. The demo uses a button to trigger the transitions.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"8.-sliding-css-page-transitions\">8. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/yLpWGKd\" target=\"_blank\" rel=\"noopener nofollow\">Sliding CSS Page Transitions<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLpWGKd\" data-src=\"\/\/codepen.io\/anon\/embed\/yLpWGKd?height=450&amp;theme-id=1&amp;slug-hash=yLpWGKd&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLpWGKd\" title=\"CodePen Embed yLpWGKd\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/yLpWGKd\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>A sliding CSS transition effect with buttons on the left that trigger the page transition. The pages are full screen and slide in and out with the content, you can add more elements in the HTML and each page has a title.<\/p>\n\n\n\n<p>The transition is very smooth and is great for full-screen content.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"9.-cubic-page-transition\">9. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/popmqVm\" target=\"_blank\" rel=\"noopener nofollow\">Cubic Page Transition<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_popmqVm\" data-src=\"\/\/codepen.io\/anon\/embed\/popmqVm?height=450&amp;theme-id=1&amp;slug-hash=popmqVm&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed popmqVm\" title=\"CodePen Embed popmqVm\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/popmqVm\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>A fancy and cool demo that is built as a portfolio, it has an animated background and you can click the \u201cView Portfolio\u201d button to watch the page transition.<\/p>\n\n\n\n<p>The animation is very smooth and obviously, in this demo, you would need to add your own content and elements but the whole transition effect is there.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"10.-css-transition-loader-screen\">10. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/RwxmEJj\" target=\"_blank\" rel=\"noopener nofollow\">CSS Transition Loader Screen<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwxmEJj\" data-src=\"\/\/codepen.io\/anon\/embed\/RwxmEJj?height=450&amp;theme-id=1&amp;slug-hash=RwxmEJj&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwxmEJj\" title=\"CodePen Embed RwxmEJj\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/RwxmEJj\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>Some CSS page transitions are triggered by clicking a button but another use for them is for switching between pages that need to load.<\/p>\n\n\n\n<p>This example shows us how you can use a CSS transition loader to load content in the background and then show the page when it is ready, everything is animated using CSS and it is very smooth.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"11.-thumbnail-to-fullscreen-transition\">11. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/YzYbdxV\" target=\"_blank\" rel=\"noopener nofollow\">Thumbnail To FullScreen Transition<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzYbdxV\" data-src=\"\/\/codepen.io\/anon\/embed\/YzYbdxV?height=450&amp;theme-id=1&amp;slug-hash=YzYbdxV&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzYbdxV\" title=\"CodePen Embed YzYbdxV\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/YzYbdxV\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>CSS page transitions can be used for all sorts of things, one of the best use cases is to transition from an image to more text\/information.<\/p>\n\n\n\n<p>This page transition uses a thumbnail which when clicked brings up a larger background and some text to explain what was clicked on, you can then use the cross in the top right to close the page and click another. It uses some JavaScript but nothing too complicated.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"12.-pure-css-sliding-page-transition\">12. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/yLpWGor\" target=\"_blank\" rel=\"noopener nofollow\">Pure CSS Sliding Page Transition<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLpWGor\" data-src=\"\/\/codepen.io\/anon\/embed\/yLpWGor?height=450&amp;theme-id=1&amp;slug-hash=yLpWGor&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLpWGor\" title=\"CodePen Embed yLpWGor\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/yLpWGor\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>Built with pure HTML and CSS, this transition starts upon page load, you could use this effect to make elements appear on a scroll or when a page loads.<\/p>\n\n\n\n<p>It could also be paired with some basic JavaScript to trigger the animation on click or between multiple elements. Either way, this can be a great starting point for CSS page transitions.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"13.-basic-page-transition\">13. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/LYeKGVV\" target=\"_blank\" rel=\"noopener nofollow\">Basic Page Transition<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYeKGVV\" data-src=\"\/\/codepen.io\/anon\/embed\/LYeKGVV?height=450&amp;theme-id=1&amp;slug-hash=LYeKGVV&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYeKGVV\" title=\"CodePen Embed LYeKGVV\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/LYeKGVV\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>A great example of what a simple page transition can look like.<\/p>\n\n\n\n<p>This example uses an almost pure-CSS solution to create the animation between pages.<\/p>\n\n\n\n<p>There are no external JS libraries and the few lines of JavaScript are super basic to deal with clicks, detection of the end of animations, and page load.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"14.-scroll-sliding-css-transition\">14. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/rNpgopN\" target=\"_blank\" rel=\"noopener nofollow\">Scroll Sliding CSS Transition<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNpgopN\" data-src=\"\/\/codepen.io\/anon\/embed\/rNpgopN?height=450&amp;theme-id=1&amp;slug-hash=rNpgopN&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNpgopN\" title=\"CodePen Embed rNpgopN\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/rNpgopN\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>Another scrolling CSS page transition now, this one is more complete and works with multiple pages. In this example, you can see that there are 8 slides to scroll through, try scrolling and watching the fancy animation switch between different pages.<\/p>\n\n\n\n<p>Each slide has its own title and subtitle, and there is also a slide counter on the left side.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"15.-background-css-page-transition\">15. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/vYpwvpJ\" target=\"_blank\" rel=\"noopener nofollow\">Background CSS Page Transition<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYpwvpJ\" data-src=\"\/\/codepen.io\/anon\/embed\/vYpwvpJ?height=450&amp;theme-id=1&amp;slug-hash=vYpwvpJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYpwvpJ\" title=\"CodePen Embed vYpwvpJ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/vYpwvpJ\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>A CSS page transition based on scrolling, the background will slide in and out, enabling you to show different images or even elements if you were to change it &#8211; which could be done very easily in the HTML.<\/p>\n\n\n\n<p>There is even some basic pagination at the bottom with the page number and indication dots.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"16.-lollipop-button-pure-css-transition\">16. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/ZEvNVvg\" target=\"_blank\" rel=\"noopener nofollow\">Lollipop Button Pure CSS Transition<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEvNVvg\" data-src=\"\/\/codepen.io\/anon\/embed\/ZEvNVvg?height=450&amp;theme-id=1&amp;slug-hash=ZEvNVvg&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEvNVvg\" title=\"CodePen Embed ZEvNVvg\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/ZEvNVvg\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>A more of a unique CSS transition, this is a button that transitions into a page that has a title and a main body of text.<\/p>\n\n\n\n<p>You could easily use this to set up multiple buttons and have pages display over the main page like a modal. Very modern and allows you to stay on the same page overall.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"17.-css-reveal-transition-effect\">17. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/XWVwoEb\" target=\"_blank\" rel=\"noopener nofollow\">CSS Reveal Transition Effect<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XWVwoEb\" data-src=\"\/\/codepen.io\/anon\/embed\/XWVwoEb?height=450&amp;theme-id=1&amp;slug-hash=XWVwoEb&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XWVwoEb\" title=\"CodePen Embed XWVwoEb\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/XWVwoEb\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>CSS page transitions can be used for a lot of things and this one is initially used to hide a full-screen menu, once clicked it opens up the menu and its different pages.<\/p>\n\n\n\n<p>You can scroll to each page yourself, or use the menu button to select a section and transition to each section on the screen.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>This CSS page transition uses a hamburger menu, check out this article we wrote on some <a href=\"https:\/\/alvarotrigo.com\/blog\/hamburger-menu-css\/\">amazing CSS hamburger menus<\/a> you can use yourself<\/p>\n<\/blockquote>\n\n\n<h2 class=\"wp-block-heading\" id=\"18.-multi-step-css-content-transition\">18. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/JjMqwZR\" target=\"_blank\" rel=\"noopener nofollow\">Multi-Step CSS Content Transition<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjMqwZR\" data-src=\"\/\/codepen.io\/anon\/embed\/JjMqwZR?height=450&amp;theme-id=1&amp;slug-hash=JjMqwZR&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjMqwZR\" title=\"CodePen Embed JjMqwZR\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/JjMqwZR\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>The whole setup with this demo is super cool, the design itself is very engaging and it isn\u2019t just a basic functionality demo &#8211; you can actually see how this transition effect can be used within a real possible website.<\/p>\n\n\n\n<p>By clicking the \u201cRead More\u201d button it will start the first transition, the content scales, and slides into view &#8211; more text is displayed and the main image becomes smaller to make room for the text.<\/p>\n\n\n\n<p>Click the \u201c See Map\u201d to then watch the final transition of the map flipping into view and the text fading out &#8211; you then have the final step to transition back to the home page.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"19.-section-full-screen-css-transitions\">19. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/OJzYrQZ\" target=\"_blank\" rel=\"noopener nofollow\">Section Full-screen CSS Transitions<\/a><\/h2>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJzYrQZ\" data-src=\"\/\/codepen.io\/anon\/embed\/OJzYrQZ?height=450&amp;theme-id=1&amp;slug-hash=OJzYrQZ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJzYrQZ\" title=\"CodePen Embed OJzYrQZ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/OJzYrQZ\" title=\"See Demo\" target=\"_blank\" rel=\"noopener nofollow\">See Demo<\/a><\/div>\n<\/div>\n\n\n\n<p>A full-screen layout that, when clicked, each section opens up and scales into view. The CSS transition creates a full-screen layout of each section when clicked.<\/p>\n\n\n\n<p>Each section has its own close button so that you can return back to the original screen. You could easily add more elements to each section.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"how-do-you-make-a-smooth-transition-in-css%3F\">How Do You Make A Smooth Transition In CSS?<\/h2>\n\n\n<p>Make sure you are only animating the elements you need to and don\u2019t include too many elements, which may become resource-intensive for some devices &#8211; CSS will generally create a smooth transition for you by using the <a href=\"https:\/\/alvarotrigo.com\/blog\/css-transition-timing-function\/#setting-customised-timing-functions-with-cubic-bezier()\">cubic B\u00e9zier curve<\/a> algorithm. With this function, you can customize the acceleration and deceleration of your transition to generate a smooth transition.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"final-thoughts\">Final Thoughts<\/h2>\n\n\n<p>Hopefully, you have found some page transitions that you like and can use yourself in your own projects &#8211; you can take these examples and create your own unique effect on your websites.<\/p>\n\n\n\n<p>Some examples here are just basic functionality demos, but some are more complete than others, so you should find something that suits your skillset and needs with what you want to use CSS page transitions for.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"related-articles\">Related Articles<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/css-transition-timing-function\/\">CSS Transition [Timing Function &amp; Delay]<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/css-transition-duration\/\">CSS Transition Duration<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/animated-backgrounds-css\/\">20 CSS Animated Backgrounds [CodePens]<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/7-scroll-text-animations-css-and-js\/\">7 CSS &amp; JS Scroll Text Animations [CodePen Examples]<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/css-text-animations\/\">15+ CSS Text Animation Effects [With Examples]<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a collection with some great CSS Page Transitions and animations to use in your websites. We added CodePen examples so you can play with them and create your own transitions.<\/p>\n","protected":false},"author":11,"featured_media":4910,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[106],"tags":[9,16,126,17],"class_list":["post-4911","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-design","tag-inspiration","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=4911"}],"version-history":[{"count":5,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4911\/revisions"}],"predecessor-version":[{"id":15382,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4911\/revisions\/15382"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/4910"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=4911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=4911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=4911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}