css3 se desvanece en la carga de la página, después de segundos

He estado buscando una respuesta durante un time alnetworkingedor de stackoverflow, pero me parece que esto no se ha cuestionado antes.

excusas si podría haber perdido la respuesta en alguna parte, pero aquí va:

Así que estoy trabajando en una página que se desvanece en una carga de div en la página, ahora quiero atenuarla después de unos segundos. parece que no puedo encontrar la manera correcta de hacer esto.

@-webkit-keyframes fadein { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadeout { from { opacity:1; } to { opacity:0; } } div { width: 400px; margin: 0 auto; text-align: center; -webkit-animation:fadein 1s; -webkit-animation:fadeout 1s; -webkit-animation-delay:fadeout 5s; } 

El html:

  <div> <h1><font size="+6"> :(</font></h1><br /> <h1>Whoops<span>Something went wrong</span></h1><br /> <h1><span><div id="timer_div">you will be networkingirected in</div> seconds</span></h1> </div> 

Su problema radica en aplicar dos animaciones a la vez que realmente desea ejecutar en secuencia. Para que esto funcione de manera confiable, tienes dos opciones:

Solo CSS: http://jsfiddle.net/marionebl/M9LR6/

Observe la opacity: 0; para mantener el post oculto cuando finaliza la animation. Además: Esto no funcionará en IE <= 9, no admite animaciones de fotogtwigs key: http://caniuse.com/#feat=css-animation

 @keyframes fadeInOut { 0% { opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } } .message { width: 400px; margin: 0 auto; opacity: 0; text-align: center; -webkit-animation: fadeInOut 6s; animation: fadeInOut 6s; } 

Involucrando a JS: http://jsfiddle.net/marionebl/P26c9/1/

Es algo más flexible y fácil de cambiar, admite IE9.

CSS:

 @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeIn { -webkit-animation: fadeIn; animation: fadeIn; opacity: 1; } .fadeOut { -webkit-animation: fadeOut; animation: fadeOut; opacity: 0; } .fast { -webkit-animation-duration: 1s; animation-duration: 1s } .message { width: 400px; margin: 0 auto; text-align: center; } 

JS:

 var $message = $('.message'); $message.addClass('fadeIn fast'); setTimeout(function(){ $message.removeClass('fadeIn').addClass('fadeOut'); }, 5000); 

Debe usar solo una animation para un elemento: http://jsfiddle.net/maximgladkov/YR5UM/

 @-webkit-keyframes fade { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } div { width: 400px; margin: 0 auto; text-align: center; -webkit-animation: fade 6s; -webkit-animation-fill-mode: both; } 

¿Has intentado un retraso de esta forma?

 transition-delay: 2s; -webkit-transition-delay: 2s; /* Safari */ 

o:

 animation-delay:2s; -webkit-animation-delay:2s; /* Safari and Chrome */ 

Use Jquery animado.

 $(document).ready(function(){ $('.div').delay(2000).animate({opacity:100},1000) }) 

Esto se retrasará durante 2 segundos cuando la página se cargue y luego el div se desvanecerá.