¿Animación de transición CSS3 al cargar?

¿Es posible utilizar la animación de transición CSS3 al cargar la página sin utilizar Javascript?

Esto es más o menos lo que quiero, pero al cargar la página:

control deslizante de imagen.html

Lo que encontré hasta ahora

CSS3 Transition-Delay , una forma de retrasar los efectos en los elementos. Sólo funciona al pasar el mouse.
CSS3 Keyframe , funciona bajo carga pero es extremadamente lento. No es útil por eso.
La transición CSS3 es lo suficientemente rápida pero no se anima al cargar la página.

Jul 24 '11 14:07 Jens Törnell

Puede ejecutar una animación CSS al cargar la página sin utilizar JavaScript; solo tienes que usar fotogramas clave CSS3 .

Veamos un ejemplo...

Aquí hay una demostración de un menú de navegación que se desliza hacia su lugar usando CSS3 únicamente:

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

Expandir fragmento

Descomponerlo...

Las partes importantes aquí son la animación de fotogramas clave que llamamos slideInFromLeft...

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

...que básicamente dice "al principio, el encabezado estará fuera del borde izquierdo de la pantalla en todo su ancho y al final estará en su lugar".

La segunda parte llama a esa slideInFromLeftanimación:

animation: 1s ease-out 0s 1 slideInFromLeft;

Arriba está la versión abreviada, pero aquí está la versión detallada para mayor claridad:

animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

Puedes hacer todo tipo de cosas interesantes, como deslizar el contenido o llamar la atención sobre áreas.

Esto es lo que el W3C tiene que decir.

Sep 28 '2012 10:09 Chris Spittles

Se necesita muy poco Javascript:

window.onload = function() {
    document.body.className += " loaded";
}

Ahora el CSS:

.fadein {
    opacity: 0;
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
}

body.loaded .fadein {
    opacity: 1;
}

Sé que la pregunta decía "sin Javascript", pero creo que vale la pena señalar que existe una solución fácil que involucra una línea de Javascript.

Incluso podría ser Javascript en línea, algo así:

<body onload="document.body.className += ' loaded';" class="fadein">

Eso es todo el JavaScript que se necesita.

Jul 07 '2013 00:07 Rolf