@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; } 
}
@-moz-keyframes fadeIn {
0% { opacity: 0;}
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

.fadeIn {
-webkit-animation: fadeIn 2s ease-in-out;
-moz-animation: fadeIn 2s ease-in-out;
-o-animation: fadeIn 2s ease-in-out;
animation: fadeIn 2s ease-in-out;
}

.fadeImg {
opacity:0;
-webkit-animation: fadeIn 3s ease-in-out;
-moz-animation: fadeIn 3s ease-in-out;
-o-animation: fadeIn 3s ease-in-out;
animation: fadeIn 3s ease-in-out; 
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;}

.fadeImg-delay {	
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;}

.fadeImg-delay1 {	
-webkit-animation-delay:3s;
-moz-animation-delay:3s;
-o-animation-delay:3s;
animation-delay:3s;}


<!-- Em fadeImg2 o 5s é o tempo que a imagem demora para iniciar o processo de fade)

<!-- Em fadeImg2-delay o 3s é o tempo que a imagem demora para ir de 0 a 1 sendo 1 a imagem sólida e 9 ela transparente total)

.fadeImg2 {
opacity:0;
-webkit-animation: fadeIn 3s ease-in-out;
-moz-animation: fadeIn 3s ease-in-out;
-o-animation: fadeIn 3s ease-in-out;
animation: fadeIn 3s ease-in-out; 
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;}

.fadeImg2-delay {	
-webkit-animation-delay:8s;
-moz-animation-delay:8s;
-o-animation-delay:8s;
animation-delay:8s;}

}

<!--Para piscar coloque a chaves depois dese texto que está aqui em baixo--!>

-webkit-animation-direction:alternate;
animation-iteration-count:infinite;
animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;