Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Animation
Webdesign

Enhance the Way a Web Page Loads With CSS Animations

by
Difficulty:IntermediateLength:ShortLanguages:

In a previous tutorial we created a full-screen responsive page with flexbox. Today, we’ll make this page more attractive by adding a few CSS animations to it.

Here's what we're going to build:


1. The HTML

In order to add the desired animations, we’ll slightly update the initial page markup. In the previous tutorial, the markup of our main element looked like this:

For the purposes of this tutorial, we’ll add some extra wrappers, changing it to this:

Below is the overall page markup after this modification:

2. Adding Initial CSS Styles

With the HTML in place, let’s focus our attention on the important stuff: the CSS.

To begin with we’ll do four things:

  1. Hide all the page elements.
  2. Set styles for the header and footer elements and their sub-elements.
  3. Define styles for the ::after pseudo-element of the header
  4. Specify styles for the text wrappers and their sub-elements inside the main.

Here are the associated styles:

3. Firing CSS Animations

With the HTML and basic CSS ready, we can now concentrate on the page animations. 

However, before doing that, let’s make sure we understand when they should run: ideally, as soon as the page is fully loaded. This ensures that all page assets will be ready, sitting in the correct position, and we won’t lose any of the animation effects.

With that in mind, we first wait for the page to load, and when that happens we use JavaScript to add a loaded class to the body.

Here’s the related JavaScript code:

Any animations we apply will be done to descendants of the loaded class.

So, our first scale-in animation targets the ::after pseudo-element of the header:

Tip: By default the transform origin of an element is its center, which is why the animation of the pseudo-element starts from its center. If you want the animation to start from another position, just change the transform-origin property value of the target element.

Below you can see how our animation changes where we apply a different transform-origin:

Next, we use a fade-in effect to display the page elements. In addition to this animation, we also use a slide-in animation to show the header and footer contents:

Finally, the elements of the main become visible through a slide-in effect:

Now let’s look again at what we’ve just built:

Conclusion

In this quick tutorial, we managed to animate an HTML flexbox page by taking advantage of CSS animations.

A few notes before closing:

  • Instead of CSS animations, we could equally have used CSS transitions (almost all our animations go from a beginning state to an end state). The fade-in animation is the most complicated one because it includes three animation steps (0%, 60%, 100%).
  • Instead of 2d transforms, we could equally have used 3d transforms.
  • Play with the animation-duration and animation-delay property values to modify the animations according to your needs.
  • On mobile screens you might want to limit the number of animations that occur (e.g. remove footer animations). The demo animations work well especially on screens where all page contents are visible.

More CSS Animation Learning

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.