How to Create Animation on Page Load

There are many ways to add smooth and attractive animations to your webpage. CSS3 allows us to write behaviors for animations and transitions. In our snippet, we are particularly interested in those cases when we need to add animation on page load.

To create animation on page load, we just need to use @keyframes and some animation properties.

Let's start with HTML.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

<header>
  <a href="#">Books</a>
  <a href="#">Quizzes</a>
  <a href="#">Snippets</a>
  <a href="#">Tools</a>
</header>

Add CSS

@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {
  animation: 1s ease-out 0s 1 slideInLeft;
  background: #666;
  padding: 40px;
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, Helvetica, Sans Serif;
}

a {
  text-decoration: none;
  display: inline-block;
  margin-right: 10px;
  color: #fff;
}

Now we can bring together the parts of our code and see the result.

Example of creating animation on page load with the animation property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @keyframes slideInLeft {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(0);
        }
      }
      header {
        animation: 1s ease-out 0s 1 slideInLeft;
        background: #666;
        padding: 40px;
      }
      body {
        margin: 0;
        font-family: "Segoe UI", Arial, Helvetica, Sans Serif;
      }
      a {
        text-decoration: none;
        display: inline-block;
        margin-right: 10px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <header>
      <a href="#">Books</a>
      <a href="#">Quizzes</a>
      <a href="#">Snippets</a>
      <a href="#">Tools</a>
    </header>
  </body>
</html>

Next, we’ll demonstrate another version of this example where we use different animation-related properties instead of the animation shorthand property, as in the example above.

Example of creating animation on page load with some animation-related properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @keyframes slideInLeft {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(0);
        }
      }
      header {
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 0s;
        animation-iteration-count: 2;
        animation-name: slideInLeft;
        background: #666;
        padding: 40px;
      }
      body {
        margin: 0;
        font-family: "Segoe UI", Arial, Helvetica, Sans Serif;
      }
      a {
        text-decoration: none;
        display: inline-block;
        margin-right: 10px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <header>
      <a href="#">Books</a>
      <a href="#">Quizzes</a>
      <a href="#">Snippets</a>
      <a href="#">Tools</a>
    </header>
  </body>
</html>

Let’s see the list of animation-related properties used in this example and explain their usage: