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.
One way to add more of a unique and fun feature to your website is CSS page transitions. They can be pure CSS page transitions or have a little JavaScript to help create some of the more advanced techniques – either way, you can do so much with just pure CSS.
Let’s jump straight in and check out some amazing CSS page transitions!
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.
1. Simple Click Page Transition
Based on a few HTML, CSS, and JavaScript frameworks, this example shows you how you can create a stunning event-driven page transition.
Click the “Start” 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.
2. Tiles Page CSS Transition
A tiled CSS page transitions effect that can be used to switch between different content.
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.
3. Scaling CSS Transition
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.
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.
4. Curtain Pure CSS Page Transition
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.
Very simple and easy to use on your website.
5. Circular Clip Transition
A super simple transition that creates a beautiful page animation with a circular shape.
This transition example makes use of JavaScript and the Anime.js library and therefore it is not a pure-CSS solution.
But if you don’t mind the JS, this effect is perfect for transitions between pages on your site.
6. Full CSS Menu Page Transitions
A fully complete CSS and JavaScript-based menu with smooth transitions between pages.
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.
7. Multi-Directional CSS Page Transitions
A super cool and fancy CSS and JavaScript-based page transition demo which slides new content into view.
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.
8. Sliding CSS Page Transitions
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.
The transition is very smooth and is great for full-screen content.
9. Cubic Page Transition
A fancy and cool demo that is built as a portfolio, it has an animated background and you can click the “View Portfolio” button to watch the page transition.
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.
10. CSS Transition Loader Screen
Some CSS page transitions are triggered by clicking a button but another use for them is for switching between pages that need to load.
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.
11. Thumbnail To FullScreen Transition
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.
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.
12. Pure CSS Sliding Page Transition
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.
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.
13. Basic Page Transition
A great example of what a simple page transition can look like.
This example uses an almost pure-CSS solution to create the animation between pages.
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.
14. Scroll Sliding CSS Transition
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.
Each slide has its own title and subtitle, and there is also a slide counter on the left side.
15. Background CSS Page Transition
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 – which could be done very easily in the HTML.
There is even some basic pagination at the bottom with the page number and indication dots.
16. Lollipop Button Pure CSS Transition
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.
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.
17. CSS Reveal Transition Effect
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.
You can scroll to each page yourself, or use the menu button to select a section and transition to each section on the screen.
This CSS page transition uses a hamburger menu, check out this article we wrote on some amazing CSS hamburger menus you can use yourself
18. Multi-Step CSS Content Transition
The whole setup with this demo is super cool, the design itself is very engaging and it isn’t just a basic functionality demo – you can actually see how this transition effect can be used within a real possible website.
By clicking the “Read More” button it will start the first transition, the content scales, and slides into view – more text is displayed and the main image becomes smaller to make room for the text.
Click the “ See Map” to then watch the final transition of the map flipping into view and the text fading out – you then have the final step to transition back to the home page.
19. Section Full-screen CSS Transitions
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.
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.
How Do You Make A Smooth Transition In CSS?
Make sure you are only animating the elements you need to and don’t include too many elements, which may become resource-intensive for some devices – CSS will generally create a smooth transition for you by using the cubic Bézier curve algorithm. With this function, you can customize the acceleration and deceleration of your transition to generate a smooth transition.
Final Thoughts
Hopefully, you have found some page transitions that you like and can use yourself in your own projects – you can take these examples and create your own unique effect on your websites.
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.
