W3docs
en
Log in

How to Create Animation on Page Load

In this snippet, you will find information and examples on creating an animation on page load. For that, use CSS @keyframes and some animation properties.

Tags

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.

Create HTML

How to Create Animation on Page Load

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

Add CSS

How to Create Animation on Page Load

@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:

How to Create Animation on Page Load

<!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>
Try it Yourself »

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:

How to Create Animation on Page Load

<!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>
Try it Yourself »

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