A Collection of Page Transitions

A showcase collection of various page transition effects using CSS animations.
A Collection of Page Transitions

From our sponsor: Looking for an intuitive whiteboard style project management tool? Give Shortcut a try for free.

Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspective and 3d transforms to create some depth and dynamics.

Please note that this is just for showcasing some interesting effects and for inspiration. It is not a slider or anything like that. We’ll just apply some classes to make the page transition visible, not for navigating.

The CSS animations are divided into different sets, depending on what they do.

Please note: this only works as intended in browsers that support the respective CSS properties.

For showcasing the page transitions, we’ve used the following structure:

<div id="pt-main" class="pt-perspective">
	<div class="pt-page pt-page-1">
		<h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
	<div class="pt-page pt-page-2"><!-- ... --></div>
	<!-- ... -->

The perspective container is relative and we add a perspective of 1200px to it. The following styles are needed for all animations to work:

.pt-perspective {
	position: relative;
	width: 100%;
	height: 100%;
	perspective: 1200px;
	transform-style: preserve-3d;

.pt-page {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	overflow: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);

.no-js .pt-page {
	visibility: visible;

.no-js body {
	overflow: auto;

.pt-page-ontop {
	z-index: 999;

The .pt-page-ontop is used for some of the page transitions where we need one of the pages to stay on top of the other one.

An example for animation classes and keyframe animations are the following ones that scale the pages in different directions and fade them in or out:

/* scale and fade */

.pt-page-scaleDown {
	animation: scaleDown .7s ease both;

.pt-page-scaleUp {
	animation: scaleUp .7s ease both;

.pt-page-scaleUpDown {
	animation: scaleUpDown .5s ease both;

.pt-page-scaleDownUp {
	animation: scaleDownUp .5s ease both;

.pt-page-scaleDownCenter {
	animation: scaleDownCenter .4s ease-in both;

.pt-page-scaleUpCenter {
	animation: scaleUpCenter .4s ease-out both;

/************ keyframes ************/

/* scale and fade */

@keyframes scaleDown {
	to { opacity: 0; transform: scale(.8); }

@keyframes scaleUp {
	from { opacity: 0; transform: scale(.8); }

@keyframes scaleUpDown {
	from { opacity: 0; transform: scale(1.2); }

@keyframes scaleDownUp {
	to { opacity: 0; transform: scale(1.2); }

@keyframes scaleDownCenter {
	to { opacity: 0; transform: scale(.7); }

@keyframes scaleUpCenter {
	from { opacity: 0; transform: scale(.7); }

For the purpose of this demonstration we apply the respective animation classes to the current page and the incoming one. For example:


case 17:
	outClass = 'pt-page-scaleDown';
	inClass = 'pt-page-moveFromRight pt-page-ontop';
case 18:
	outClass = 'pt-page-scaleDown';
	inClass = 'pt-page-moveFromLeft pt-page-ontop';
case 19:
	outClass = 'pt-page-scaleDown';
	inClass = 'pt-page-moveFromBottom pt-page-ontop';

// ...

Check out the demo where you can simply iterate through the whole set of page transitions using the first button. You can also choose a specific effect from the drop-down menu.

I hope you enjoy this and get inspired to build some exciting things!

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 270

Comments are closed.
  1. Hello,
    This is a very awesome collection of page transition! But I have limited skills in coding, and I tried to do it but I just failed to do that.
    Does anyone can tell me how can I apply the transition that I want on my page with only one button?

  2. Hi there, I’m trying to implement the transitions to my website but I can’t seem to be able to do it. I have a one page website with anchor links. I have given the li the data-animation number, 67 in my case, however, if I use the menu wrapper, my whole menu dissapears

  3. Hi… i like the wonderful transitions. thanx for sharing… but , i had a problem… its not working in firefox.. please help. sory for my poor english..

  4. wow great stuff, how can we do this on some menu/navigation for various button, thanks

  5. Hi, i use this but it is hard to emplement other jquery? Why? I can use only this. Other jquery corrupted the transition.

  6. Hi,
    Probably I’m a dumb but I don’t understand how to use this transition system between two html pages ?
    Can you explain me?
    What ever it’s very beautiful.
    Thank you

  7. Hello,

    a wonderful piece of code … i really love it!

    I got one question: How can i change the current page with a function. i mean, without clicking something?

    Something like this:

    function changePage() {


  8. Hello 🙂 Does this code works on Android Web Browser? Because I’m testing, and it seems not to work :X

  9. Hello. I wanted to ask if it is possible to link someone not to the main page,but straight to the sections. For example if class=”pt-page pt-page-2″ has id=”contacts” how I can link it straight to contacts section when typing in my browser widow?

  10. Great work , its really awesome , but can anyone show me how can I apply the same effect from one page to another , example how can I flip the page when I click on the link to open the respective page

  11. Hi

    Awesome collections

    I want to add ‘back button’ on every slides and when click on back button go to previous slide. How can achieve?
    Please help me.

    Thanks in advance

  12. Hello everyone.

    I turned the page transitions into a full blown slider for use in my personal projects. Features include:

    – Fully responsive.
    – Will fit any screen.
    – Can be used to slide images or entire pages.
    – Animatable layers.
    – Ability to use different options for different screens.
    – Ability to load different images for different screens.
    – Thumbnail previews.
    – API functions like goToSlide(), goForward(), goBack(), destroy() etc
    – Callback functions like onLoad(), afterSlide() etc
    – Sliced effects
    – + much more.

    If anyone is interested I can post it on github. Here are a few demos:

    1. Image slider with preset effects. Demo

    2. Image slider with selectable effects. Demo

    3. One page concept site with sliding pages. Demo


    • Hello Arnold, very nice effects you got here. Well done.
      I’m particularly interested by the “move Over V” transition that I have to do for a gallery in a website I’m currently coding.
      I guess a github could help a lot, or if you have any advices on how to achieve it, let me know.

      Have a nice day!

    • Sorry for responding so late!

      I don’t get any email notifications when a new comment is posted so I was not aware of any responses. Anyway, I’ll post the code on github this week and share the link.

    • Hi Anrold, I’ve seen your slider and it’s wonderful, I’d like to use it but I can’t find a download/github link or a tutorial..
      Can you help me?

  13. Thank you for awesome page transitions, however I found difficulty in implementation, instruction of implementation is not proper.
    Thank you @Jobin Kurian for proper instructions for implementation.

  14. does it works for wordpress? if works, can you tell me step to make page transitions? sorry, i haven’t skill in coding