FABLED.DAY - css page transitions

CSS page transitions

Guess what?

You can (often enough) use CSS keyframes to create zippy animations that occur when a page loads. This functions like a transition between one page and the next, for a fluid user experience. It can help add a calmness (or other vibes, as we’ll see) to the site as a whole.

You might’ve noticed that this very site uses a fade-in animation throughout; the main content area slowly appears after the background loads first. This brief article covers how that is accomplished (or at least, how I’ve been doing it), and provides some alternative page transitions as well.

I hope to add to this category as time goes on. While you can already see what the fading page transition looks like on my site here, you really ought to check out examples of these effects over on CodePen. That’s especially true if you like eurodance or related genres.

HTML

I’m including the HTML up here because it really does remain the same for all the page transitions here - all you need to do is replace the highlighted section with the name of the class signifying the effect of your choice (ie, fade, slide, or burst). Since these are CSS classes, you can apply them to any particular container or page element, etc, but I’ve found it most useful to apply them to the main container holding all content, if possible. If your site’s structure doesn’t already have such a container, you can (usually) wrap everything in one simply for this purpose and get away with it, too. Anyways…

<div class="THE NAME OF THE EFFECT GOES HERE">YOUR SITE CONTENT GOES HERE</div>

Not much there, is there? Not much to it? Not really, at least not in terms of the HTML. That's it. It's just a CSS class. Apply to an existing div (again, ideally the wrapper for the whole site), or make a wrapper for the whole site using this class. Be mindful that your chosen effect will not work without the addition of the corresponding CSS from below, either in the header of your document or in your stylesheet file.

.FADE

For a relaxed and soothing vibe, try using an animation that fades the main content of the page onto the visitor’s screen slowly (but not annoyingly slowly). You can quite easily control the speed, and the snippet is very short. I use this on my other site and this one, as mentioned. I think it works particularly well if one loads a patterned (or other) background image normally, and the entire site content fades over it gently.

.fade {
    animation: fade ease 3s; /* 3s, of course, signifies 3 seconds, the duration of the fade - change this if you wish! */
    
    }
    @keyframes fade {
    0% {opacity:0;}
    100% {opacity:1;}
    }

.SLIDE

For a fun, groovy (in my opinion) site, try sliding the main content into view, from one direction or another. This is a little trickier than simple fading, but not too difficult to customize. It can slide in from the left of the visitor’s screen, rise from the bottom, fall from the top, even slide back from the right side. All these options do give a distinctly different vibe (rising, sliding, falling, etc), so you ought to experiment a bit! I did (personally) find sliding it backwards from the right a little jarring - I thought I’d mention that.

To change between the different modes (sliding from top, left, right, etc), follow the instructions embedded in the CSS snippet; for example, to do that weird "slide from the right" thing, it ought to read "translateX(100%)" instead of "translateX(-%100%)."


    .slide {
      animation: slide ease 3s; /* 3s, of course, signifies 3 seconds, how long the slide takes - change this if you wish. */
    }
    @keyframes slide {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0%);
      }
    }
    
    /* to make the content slide from the top, simply replace "translateX" with "translateY" above */
    
    /* to make it rise from the bottom it should read as below instead: 
      @keyframes slide {
      0% {transform: translateX(100%);}
      100% {transform: translateX(0%);}
    }  
    */
    
    /* to make it dodge in from the right, use this: 
    
    @keyframes slide {
      0% {transform: translateX(100%);}
      100% {transform: translateX(0%);}
    } 
    
    */

.BURST

You can, if you really, really want to, set things up such that the main content explodes outwards onto the visitor’s screen. This would be rather startling to see over and over while clicking through your site (I think), but could work aesthetically for some situations. I also want to point out that it’s perfectly possible to apply the class .burst from this CSS snippet to other objects on the page solo (rather than all content or the main content). This will give them emphasis upon load, and might be preferable to bouncing the entire site in the user’s face. Your choice, as always, darlings.


.burst {
    animation: burst 1s ease-out forwards; /* 1s, of course, signifies 1 second, the amount of time the burst takes - change this if you wish! */
  }
  @keyframes burst {
    0% {
      transform: scale(0);
    }
    80% {
      transform: scale(
        1.5
      ); /* the scale number here indicates just how big the container will burst before settling down to its normal size. in this case, it grows 1.5X bigger, but you can easily change that by changing the number. */
    }
    100% {
      transform: scale(1);
    }
  }