iniciar animación css3 después de cargar toda la página

Question

¿Alguien sabe cómo iniciar una animación css3 después de que el resto de la página se carga por completo (imágenes y todo)?

Estoy usando un retraso ahora mismo para imitarlo, pero esto no es lo que estoy buscando.

Gracias

Peter

Answer 1

que está más allá del alcance de CSS, pero es bastante fácil de hacer con jQuery

$(document).ready(function() {/*You code here*/ } 

o leer más sobre esto aquí =>http://api.jquery.com/ready/

Coloque su código de animación en una clase, digamos .animación

A continuación, llame esa clase en el elemento que desee animar usando jQuery .addclass() (http://api.jquery.com/addClass/)

Algo como esto

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#element-to-animate").addClass("animation"); 
    }); 
    </script> 

Answer 2

function atload() {dom_rdy()}window.onload=atload; 

pegarla en la parte superior de los js, y trabajando con la función dom_rdy() llamará cuando dom esté listo, sin jQuery y otros toneladas de código.

Answer 3

.bodyclass div{ 
    some animation css code 
} 

Después de la carga corporal sólo se aplica a bodyclass la etiqueta de cuerpo, entonces todos los divs en la página serán animatable. Esta solución es eficiente, dijo @Husar, porque, necesitamos buscar solo el elemento del cuerpo después de que se complete la carga de la página, pero en otro caso, necesitamos cambiar todos los elementos del nombre de la clase que se debe animar.

Answer 4

$(window).load(function(){...})

funciona bien!

Pero utilícelo solo cuando desee que se carguen las imágenes.

Answer 5

div 
    { 
    -webkit-animation-delay: 5s; 
    animation-delay: 5s; 
    } 

Answer 6

@La solución Mavericks funciona. Sin embargo, una solución mucho más simple que trabajó para mí era:

CSS:

body { 
    display: none; 
} 

JS:

(function() { 
    $('body').css('display', 'block'); 
})(); 

o puede utilizar mostrar/ocultar. Pero, la animación se volvió defectuosa en IE10 e IE11. Por lo tanto, he cambiado el código para específicamente para estos navegadores para:

CSS:

body { 
    visibility: hidden; 
} 

JS:

(function() { 
    $('body').css('visibility', 'visible'); 
})(); 

También encontré esto: https://css-tricks.com/transitions-only-after-page-load/

Tal vez podría ayudar a alguien .