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

He estado buscando una respuesta durante un tiempo alrededor 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:

  

:(


WhoopsSomething went wrong


you will be redirected in
seconds

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 mensaje oculto cuando finaliza la animación. Además: Esto no funcionará en IE <= 9, no admite animaciones de fotogramas clave: 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 animación 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 probado 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á.