A Collection of Page Transitions

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

A Collection of Page Transitions

From our sponsor: Try Mailchimp today.

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>
	<div class="pt-page pt-page-2"><!-- ... --></div>
	<!-- ... -->
</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);
}

.pt-page-current,
.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';
	break;
case 18:
	outClass = 'pt-page-scaleDown';
	inClass = 'pt-page-moveFromLeft pt-page-ontop';
	break;
case 19:
	outClass = 'pt-page-scaleDown';
	inClass = 'pt-page-moveFromBottom pt-page-ontop';
	break;

// ...

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. Excellent tutorial! Funny though, it works in IE10 but the ‘Choose A Transition’ button does not show in Chrome27.

  2. I am very happy to see this and so much thanks to you….

    thanks
    rajani kanth

  3. These work just fine in Internet Explorer BTW. Thanks for doing this.

  4. That’s some amazing stuff… could use that in my next mobile project ! Thanks for sharing !

  5. Absolutely beautiful! Love it, going to be using this very soon I hope.

    Sadly won’t work on Safari , though it looks great in Firefox and Chrome for me.

  6. Hi! Pedro Botelho,
    Really a great tuts from you, Thanks for share with us.

  7. This is one of the greatest transition code to come out in a while. Great Job!

    • Hi Ricardo, could you tell me which version of Chrome you have? Thanks

    • Hi Pedro

      I’ve got the same problem as Ricardo. I’m using Chrome Canary(28).

      Cheers

    • Although the latest stable chrome (26) seems completely fine.

      Not quite sure what the problem is here.

  8. Awesome work, i tried to find this kind of effect very long time, thank you so much.
    BUt not being a developer, I need your help, I would like to use this resource and used on a fixed menu, not a drop-down list like in the example, that referral to specific pages for my portfolio, I tried to use the class in different ways, but no result.
    could someone help me please

  9. A hugely useful group of transitions to add to the arsenal. CoDrops continues to offer their audience(s) incredibly wonderful gadgets and techniques. Kudos. Really terrific resource.

  10. How can I link buttons to pt-page2, pt-page3, etc. ?!
    Or do I have to build my navigation with a list?

  11. I dont understand how to apply them to a link. Could anybody help me… Please

  12. Great Tut and article! Is it possible to use the transition function while browsing through a website? i mean the transition comes when i browse to a another site of my website?

    • The idea was to show you various transitions. Not so much how to use them on a whole page tag. The concept is to show you transitions you can use, but the way they are done might now be the best way to perform them.

  13. Hi, this is a great collection of transitions. However, does it play nice with Google Analytics if one is to track specific page visits?

    • Looks great and I am surely this will not effect our analytics code.

  14. Hey guys!
    Great showcase, but just to leave a note for everyone, these transitions don’t work on Mobile Safari, since controlling visibility crashes the elements overflow. That means that if you have an elements with overflow and try to control their visibility they’ll start getting crazy with which element you want to scroll in fact…

    After long research there’s not apparent fix or tweak to this, since it’s directly in Safari. In my case I’ve hit a dead-end and had to abandon visibility transitions completely after 2 days of much struggle.

    • Hi Alexandre, thanks for your feedback. Can you please tell me which version of Mobile Safari you are referring to? I’ve tested it on an iPad 2 (5.1) and it’s working fine. Thanks

  15. .js, yawn. Could have done this entire thing with CSS3 mate, what a waste of time.

  16. Great Transitions! Can they actually be used from page to page…or does the entire site need to be one big page for these to work?