A Collection of Page Transitions

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

A Collection of Page Transitions

View demo Download source

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!

View demo Download source

Previous:
Next:

Tagged with:

Related Articles

Feedback 249

  1. 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. 4

    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. 5

    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. 10

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

  5. 11

    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

  6. 12

    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() {
    gotoPage(3);
    }

    Kisses
    M

  7. 14

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

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>