css - css3 transition animation on load?

Question

Is it possible to use CSS3 transition animation on page load without using Javascript?

This is kind of what I want, but on page load:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

What I found so far

• CSS3 transition-delay, a way to delay effects on elements. Only works on hover.
• CSS3 Keyframe, works on load but are extremly slow. Not useful because of that.
• CSS3 transition is fast enough but don't animate on page load.

Answer 1

You can run a CSS animation on page load without using any JavaScript; you just have to use CSS3 Keyframes.

Let's Look at an Example...

Here's a demonstration of a navigation menu sliding into place using CSS3 only:

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

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}

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