What is the right way to make a css on page load animation?

Question

My question isn't really on how to do an animation that fires when the page loads, it is about the best way. That means at least:

-Responsive.

-SEO friendly.

-Without flickering.

Usually I'd create a .hidden or .offpage state that is not activated (just in case there is no javascript working). Then, when the page loads, javascript adds a class to hide them without transition and then reverses the state with transition.

Is this method improvable?

It probably is, but it feels a little strange to use animate for non-decorative purposes... — Vandervals, May 18 '15 at 14:44
What do you mean? The purpose is to animate something on page load. The only case we will use Javascript to show or hide something, is when we call the data asynchronously and we want to show the div only if we got data, to avoid an empty box. — Alexis Paques, May 18 '15 at 14:50

score 0 · Accepted Answer · answered May 18 '15 at 13:47

You do not need any Javascript to animate something. You can simply use CSS3.

Example :

header {
  background: #000;
  color: #fff;
  height: 20px;
  position: relative;
  padding: 10px;
  -moz-animation-name: dropHeader;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  -moz-animation-duration: 0.3s;
  -webkit-animation-name: dropHeader;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-duration: 0.3s;
  animation-name: dropHeader;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
header ul li {
  display: inline-block;
  margin-right: 20px
}
@-moz-keyframes dropHeader {
  0% {
    -moz-transform: translateY(-40px);
  }
  100% {
    -moz-transform: translateY(0);
  }
}
@-webkit-keyframes dropHeader {
  0% {
    -webkit-transform: translateY(-40px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@keyframes dropHeader {
  0% {
    transform: translateY(-40px);
  }
  100% {
    transform: translateY(0);
  }
}
/* Added for aesthetics */

body {
  margin: 0;
  font: normal 14px"Segoe UI", Arial, Helvetica, Sans Serif;
}
a {
  color: #eee;
  text-decoration: none;
}

<header>
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Products</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</header>

What is the right way to make a css on page load animation?

1 Answers1