Gracias por los comentarios!
Básicamente se trata de de una serie de imágenes que van desapareciendo al tamaño de la pantalla y con un z-index bajo, pongo el código;
Primero creas el "wrap" que contendrá las imágenes.
Código HTML:
<div class="fija">
<div class="movimiento" id="imagen1"></div>
<div class="movimiento" id="imagen2"></div>
<div class="movimiento" id="imagen3"></div>
<div class="movimiento" id="imagen4"></div>
</div> Y se le aplica el tamaño y la posición
Código CSS:
Ver original.fija {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.movimiento {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 0px;
left: 0px;
opacity:0;
z-index: 90;
/* Este z-index puede ser un error en el resto de mi código, quizás sea opcional para vosotros */
background-size:cover;
/* Se le aplica la animación que determinará el movimiento y la opacidad de las imágenes */
-webkit-animation: imageAnimation 24s linear infinite 0s;
-moz-animation: imageAnimation 24s linear infinite 0s;
-o-animation: imageAnimation 24s linear infinite 0s;
-ms-animation: imageAnimation 24s linear infinite 0s;
animation: imageAnimation 24s linear infinite 0s;
/* La duración de la animación dependerá de la cantidad de imágenes que uséis, yo he usado 4 a 6 segundos cada una */
}
Se aplican los id para las imágenes y el delay para la animación (así no se aplica la animación a todas a la vez, sino que va afectando una a una y en orrden
Código CSS:
Ver original#imagen1 {
background-image:url(http://blog.razorsanddiapers.com/wp-content/uploads/2012/10/concert.jpg);
}
#imagen2 {
background-image:url(http://www.downloadfreebackgrounds.net/backgrounds/night-party-club-background.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#imagen3 {
background-image:url(http://www.newcaspics.info/wp-content/uploads/wallpaper-for-macbook-air-13_2727_1.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#imagen4 {
background-image:url(http://www.downloadfreebackgrounds.net/backgrounds/night-party-club-background.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
Y la animación con todos sus prefijos
Código CSS:
Ver original@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05) rotate(1deg);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(2deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0; }
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05) rotate(3deg);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05) rotate(3deg);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05) rotate(3deg);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05) rotate(3deg);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
Espero que os haya servido,
, avisar si tenéis dudas y para los que entiendan de esto, seguro que hay algún fallo o alguna línea que sobra, pero a mi me funciona así xD
Retraso efecto :hover al aplicar animation 
