Spice up your page loads with subtle animations!

In today's article I wanted to share a little twist that I like to include on some of my websites to enhance the overall user experience - adding subtle animations on page load.

I think this really adds to the website, and in some way, makes it feel a little snappier than it actually is.

HTML

You'll want to pick a portion of your site (usually the main content) to apply the animation to, for example:

<div class="container">
    <!-- body content here -->
</div>

CSS

For the CSS, we need to apply an animation to the .container class, and then specify the keyframes for it. Let's identify the keyframes with fadeIn:

.container {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from {
        opacity: 0.25;
        transform: rotateY(-10deg);
    }

    to {
        opacity: 1;
        transform: rotateY(0deg);
    }
}

As we can see with this simple @keyframes rule, we only slightly adjust the initial rotation and opacity for the element - you can choose whichever properties you like here but make sure it's not too much. Also, a snappy duration of 0.5s tends to work quite nicely.

That's it! Load up the page and see what it looks like 😁

Video Tutorial

If you prefer this tutorial in the form of video, check it out below on my YouTube channel, dcode.