News

Create smart CSS3 page transitions

The Dogstudio developers reveal the technique behind the site’s eye-catching page transitions using CSS3 animation and WebKit

dogstudio

The Dogstudio developers reveal the technique behind the site’s eye-catching page transitions using CSS3 animation and WebKit

dogstudio

GET THE CODE FOR THIS TUTORIAL


Observe the effect

On Dogstudio.be, front-end developers Larry Gérard, Anthony Dupont and Nicolas Masson used HTML5, jQuery, CanJS and CSS3 predominantly. Via a combination of these modern web standards, the team not only achieved a distinctive look, but also added ingenious effects. One of the most appreciated elements here is the page transition, which uses an animated mask. Over the following steps we’ll examine this technique using CSS3 and jQuery.

The HTML structure

First of all, set up your stage with two stacked full-screen areas. In your HTML page this needs only to be two <section> elements labelled here as back and front. Each will have a container CSS class attached, along with a removed or added class used as a selector for toggling. We’ll then use the id to differentiate any of our additional styles.

001 <body>    
002 <section class=”container removed”     id=”homepage”>
003 BACK AREA    
004 </section>    
005 <section class=”container added”     id=”content-page”>
006 FRONT AREA    
007 </section>    
008 </body>    

Set the page CSS

In the CSS we need to add the basic classes, starting with container and simply setting absolute positioning, zero margins and a z-index value. This gives us the full-screen areas we want for our section elements set in the previous step. We then use our element ids to set backgrounds and label colour to differentiate the two – before and after the transition.

001 CSS:                 
002 .container {
003 position: absolute;
004 top: 0;        
005 left: 0;     
006 right: 0;      
007 bottom: 0;        
008 z-index: 5;     
009 font-size: 120px;    
010 text-align: center;    
011 }
012 #homepage {
013 background: purple;    
014 }    
015 #content-page {    
016 background: black;    
017 color: purple;        
018 }    
019     

The spritesheet PNG

A PNG spritesheet (6474 x 280px) is then required to animate from a transparent frame. We suggest keeping it lightweight in order to improve performance. In this case, FFmpeg (ffmpeg.org) was used to extract 13 frames (498 pixels wide) from a video as PNG files we then stitched together. After the export, those files didn’t have any transparency so we used Photoshop to manually remove the white area in each of the frames.

The CSS animation

The animation uses mask and animation CSS3 properties. Inside a container.added class we first pass in the spritesheet path with mask:url() before setting the mask size. Here the width is the number of frames (13) multiplied by 100% while the height is simply one frame. The mask position is initialised to the upper-left corner before we call the animation which shifts that position to the upper-right corner over 13 steps.

001 CSS:
002 .container.added {            
003 -webkit-mask: url("transition.png");     
004 -webkit-mask-size: 1300% 100%;    
005 -webkit-mask-position: 0 0;     
006 -webkit-animation: mask-play 0.8s steps(12) 0s both;
007 z-index: 10;            008 }    
009 @-webkit-keyframes mask-play{
010 from{     
011 -webkit-mask-position: 0 0;    
012 }to{     
013 -webkit-mask-position: 100% 0;
014 }
015 }            

Complete the transition

Once your animation is ended, you will need to remove the older area with jQuery to keep your DOM clean and efficient. Then that’s it! Please note however that this technique only works on WebKit-based browsers as WebKit-only CSS properties are used. IE and Firefox don’t support those properties so Dogstudio uses a fallback to a simple fade-in or fade-out solution using Modernizr to detect support.

001 JQUERY:     
002 setTimeout(function(){         
003 $(".container.removed").remove();
004 $(".container.added").        removeClass("added");             
005 }, 800);
×