animación de transición css3 en carga?

¿Es posible usar la animación de transición CSS3 en la carga de la página sin usar Javascript?

Esto es lo que quiero, pero en la carga de la página:

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

Lo que encontré hasta ahora

  • Retraso de transición CSS3 , una forma de retrasar los efectos en los elementos. Solo funciona en hover.
  • CSS3 Keyframe , funciona en carga pero es extremadamente lento. No es útil debido a eso.
  • La transición de CSS3 es lo suficientemente rápida pero no se anima en la carga de la página.

Puede ejecutar una animación CSS en la carga de la página sin usar ningún JavaScript; solo tiene que usar fotogtwigs clave CSS3 .

Veamos un ejemplo…

Aquí hay una demostración de un menú de navegación deslizándose en su lugar usando solo CSS3 :

@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;} 
 
Home About Products Contact

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 dice “sin Javascript”, pero creo que vale la pena señalar que hay una solución fácil que implica una línea de Javascript.

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

  

Eso es todo el JavaScript que se necesita.

Creo que encontré una especie de solución para la pregunta de OP, en lugar de una transición que comienza ‘on.load’ de la página. Encontré que usar una animación para un fundido de opacidad tenía el mismo efecto (estaba buscando lo mismo que OP).

Así que quería que el texto del cuerpo se desvaneciese de blanco (igual que el fondo del sitio) a color de texto negro en la carga de la página, y solo he estado codificando desde el lunes, así que estaba buscando un código de estilo al estilo ‘on.load’. pero aún no conozco a JS, así que aquí está mi código que funcionó bien para mí.

 #main p { animation: fadein 2s; } @keyframes fadein { from { opacity: 0} to { opacity: 1} } 

Y por cualquier razón, esto no funciona para .class solo #id ‘s (al menos no en el mío)

Espero que esto ayude, ya que sé que este sitio me ayuda mucho.

Bueno, esto es complicado.

La respuesta es “no realmente”.

CSS no es una capa funcional. No tiene conciencia de lo que sucede o cuándo. Se usa simplemente para agregar una capa de presentación a diferentes “banderas” (clases, identificadores, estados).

Por defecto, CSS / DOM no proporciona ningún tipo de estado “en carga” para que CSS lo use. Si quisiera / pudiera usar JavaScript, asignaría una clase a un body o algo para activar algo de CSS.

Dicho esto, puedes crear un truco para eso. Daré un ejemplo aquí, pero puede o no ser aplicable a su situación.

Estamos operando bajo el supuesto de que “cerrar” es “lo suficientemente bueno”:

       
OMG, I've loaded !

Aquí hay un extracto de nuestra hoja de estilo CSS:

 .onLoad { -webkit-animation:bounceIn 2s; } 

También asumimos que los navegadores modernos rinden de forma progresiva, por lo que nuestro último elemento será el último, por lo que este CSS se activará al final.

Empiece con el movimiento del cuerpo de modo que se inicie cuando el mouse se mueva por primera vez en la pantalla, que se produce principalmente en un segundo después de la llegada, el problema aquí es que se invertirá cuando salga de la pantalla.

 html:hover #animateelementid, body:hover #animateelementid {rotate ....} 

eso es lo mejor que se me ocurre: http://jsfiddle.net/faVLX/

pantalla completa: http://jsfiddle.net/faVLX/embedded/result/

Editar ver comentarios a continuación:
Esto no funcionará en ningún dispositivo con pantalla táctil porque no existe el vuelo estacionario, por lo que el usuario no verá el contenido a menos que lo toque. – Rich Bradshaw

Similar a la solución de @Rolf, pero omita la referencia a funciones externas o jugando con la clase. Si la opacidad debe permanecer fija en 1 una vez cargada, simplemente use la secuencia de comandos en línea para cambiar directamente la opacidad a través del estilo. Por ejemplo

  

donde CSS sytle “fadein” se define por @ Rolf, definiendo la transición y configurando la opacidad al estado inicial (es decir, 0)

la única pega es que esto no funciona con elementos SPAN o DIV, ya que no tienen un evento onload que funcione

Ok, he logrado lograr una animación cuando la página se carga utilizando solo transiciones CSS (¡más o menos!):

He creado 2 hojas de estilo css: la primera es cómo quiero que el estilo html antes de la animación … y el segundo es cómo quiero que la página se encargue de que la animación se haya llevado a cabo.

No entiendo completamente cómo lo he logrado, pero solo funciona cuando los dos archivos css (ambos en el encabezado de mi documento) están separados por algunos javascript de la siguiente manera.

He probado esto con Firefox, Safari y Opera. A veces, la animación funciona, a veces se salta directamente al segundo archivo CSS y, a veces, la página parece estar cargándose pero no se muestra nada (¿tal vez soy yo?)

     

Aquí hay un enlace a mi sitio web de trabajo en progreso: http://www.hankins-design.co.uk/beta2/test/index.html

Tal vez estoy equivocado, pero pensé que los navegadores que no admiten transiciones CSS no deberían tener ningún problema, ya que deberían pasar directamente al segundo archivo CSS sin demora ni duración.

Estoy interesado en conocer las opiniones sobre cómo es este método amigable para los motores de búsqueda. Con mi sombrero negro, supongo que podría llenar una página con palabras clave y aplicar un retraso de 9999s en su opacidad.

Me interesaría saber cómo los motores de búsqueda manejan el atributo de demora de transición y si, utilizando el método anterior, incluso verían los enlaces y la información en la página.

Más importante aún, me gustaría saber por qué esto no es consistente cada vez que se carga la página y cómo puedo rectificar esto.

Espero que esto genere algunos puntos de vista y opiniones, ¡nada más!

En realidad, no, ya que CSS se aplica lo antes posible, pero es posible que los elementos aún no se hayan dibujado. Podría adivinar un retraso de 1 o 2 segundos, pero esto no se verá bien para la mayoría de las personas, dependiendo de la velocidad de su internet.

Además, si desea desvanecer algo en, por ejemplo, requeriría CSS que oculta el contenido que se entregará. Si el usuario no tiene transiciones CSS3, entonces nunca lo verán.

Recomiendo usar jQuery (para facilitar el uso + es posible que desee agregar animaciones para otros UA) y algunos JS como este:

 $(document).ready(function() { $('#id_to_fade_in') .css({"opacity":0}) // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!) .delay(200) // Wait for a bit so the user notices it fade in .css({"opacity":1}); // Fade it back in. Swap css for animate in legacy browsers if required. }); 

Junto con las transiciones agregadas en el CSS. Esto tiene la ventaja de permitir fácilmente el uso de animaciones en lugar del segundo CSS en los navegadores heredados si es necesario.