Retraso efecto :hover al aplicar animation

[Davi91]

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:

.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:

#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:

@-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