Solución:
Simplemente no establezcas la inicial opacity en el propio elemento, colóquelo dentro de la @keyframes:
#element{
-webkit-animation: 3s ease 0s normal forwards 1 fadein;
animation: 3s ease 0s normal forwards 1 fadein;
}
@keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
Esta técnica elimina el retraso de la animación para que comience a ejecutarse de inmediato. Sin embargo, la opacidad no cambiará realmente hasta aproximadamente el 66% en la animación. Debido a que la animación se ejecuta durante 3 segundos, da el efecto de un retraso de 2 segundos y se desvanece durante 1 segundo.
Vea el ejemplo de trabajo aquí: https://jsfiddle.net/75mhnaLt/
Es posible que también desee considerar el uso de comentarios condicionales para navegadores más antiguos; IE8 y IE9.
Algo como lo siguiente en tu HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-GB"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ie-7" lang="en-GB"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9 ie-8" lang="en-GB"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-GB"> <!--<![endif]-->
Entonces podrías hacer algo como:
.lt-ie9 #element {
opacity: 1;
}
Te sugiero que establezcas el opacity del elemento a 1 por defecto (para navegadores que no admiten animaciones). Luego comience la animación en 0s y use los fotogramas clave para retrasar la animación.
#element{
animation:3s ease 0s normal forwards 1 fadein;
-webkit-animation:3s ease 0s normal forwards 1 fadein;
opacity:1
}
@keyframes fadein{
0%{opacity:0}
80%{opacity:0}
100%{opacity:1}
}
@-webkit-keyframes fadein{
0%{opacity:0}
80%{opacity:0}
100%{opacity:1}
}
http://jsfiddle.net/mg00t86v/2/
Tuve un problema similar, donde el requisito era esperar n segundos antes de desvanecerse en diferentes elementos de la página, uno tras otro.
La clave para que esto funcione para mí, que no se menciona en ninguna de las otras respuestas, es el hecho de que animation De hecho, puede tomar una lista de animaciones para ejecutar. Comenzará a ejecutarlos simultáneamente, por lo que debe insertar retrasos para ejecutarlos secuencialmente.
Mi solución fue esta (en SCSS, pero lo suficientemente simple como para escribir como CSS directo si lo necesita):
@mixin fade-in($waitTime) {
animation:
wait #{$waitTime},
fade-in 800ms #{$waitTime};
}
@keyframes wait {
0% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
Uso:
h1 {
@include fade-in('500ms');
}
h2 {
@include fade-in('700ms');
}