imagen - CSS3 animar fuera de: hover

hover css transition

Question

Estoy configurando una animación simple que trae un poco de información adicional cuando pasas el cursor sobre una imagen. La parte de copia de seguridad de jQuery está escrita y funciona bien, aunque el problema con el que estoy teniendo problemas es hacer que la animación CSS3 se invierta cuando el usuario se desplaza.

Entonces, cuando pasas el ratón, funciona bien, pero tan pronto como pasas los elementos, simplemente desaparecen. Lo que me gustaría saber es si hay una forma de animarlas hacia atrás cuando el mouse se mueve en otro lado. ¡Muchas gracias!

#recent-work div { position: relative; width: 300px; height: 168px; overflow: hidden; }
                
                #recent-work div:hover .recent-project-type {  
                    animation-name: showType;
                    animation-duration: .5s;
                    animation-timing-function: ease;
                    animation-delay: 0;
                    animation-iteration-count: 1;
                    animation-direction: normal;
                    animation-play-state: running;
                    -moz-animation-name: showType;
                    -moz-animation-duration: .5s;
                    -moz-animation-timing-function: ease;
                    -moz-animation-delay: 0;
                    -moz-animation-iteration-count: 1;
                    -moz-animation-direction: normal;
                    -moz-animation-play-state: running;
                    -webkit-animation-name: showType;
                    -webkit-animation-duration: .5s;
                    -webkit-animation-timing-function: ease;
                    -webkit-animation-delay: 0;
                    -webkit-animation-iteration-count: 1;
                    -webkit-animation-direction: normal;
                    -webkit-animation-play-state: running;
                    top: 0;
                }
                
                #recent-work div:hover .recent-project-title {  
                    animation-name: showTitle;
                    animation-duration: .5s;
                    animation-timing-function: ease;
                    animation-delay: 0;
                    animation-iteration-count: 1;
                    animation-direction: normal;
                    animation-play-state: running;
                    -moz-animation-name: showTitle;
                    -moz-animation-duration: .5s;
                    -moz-animation-timing-function: ease;
                    -moz-animation-delay: 0;
                    -moz-animation-iteration-count: 1;
                    -moz-animation-direction: normal;
                    -moz-animation-play-state: running;
                    -webkit-animation-name: showTitle;
                    -webkit-animation-duration: .5s;
                    -webkit-animation-timing-function: ease;
                    -webkit-animation-delay: 0;
                    -webkit-animation-iteration-count: 1;
                    -webkit-animation-direction: normal;
                    -webkit-animation-play-state: running;
                    bottom: 0;
                }
            
            .recent-project-title { position: absolute; left: 0; right: 0; bottom: -34px; padding: 8px 10px; background: rgba(0,0,0,.75); text-decoration: none; border: 0; font-size: 20px; font-weight: 400; color: #fff; }
                .recent-project-title:hover { color: #ff9900; text-decoration: none; }
                
            .recent-project-type { position: absolute; left: 0; top: -26px; padding: 4px 8px; font-size: 12px; font-weight: 600; background: #ff9900; text-transform: uppercase; color: #111; }
                .recent-project-type:hover { color: #fff; text-decoration: none; }

@keyframes showType {
    from { top: -26px; }
    to { top: 0; }
}

@-moz-keyframes showType {
    from { top: -26px; }
    to { top: 0; }
}

@-webkit-keyframes showType {
    from { top: -26px; }
    to { top: 0; }
}

@keyframes showTitle {
    from { bottom: -34px; }
    to { bottom: 0; }
}

@-moz-keyframes showTitle {
    from { bottom: -34px; }
    to { bottom: 0; }
}

@-webkit-keyframes showTitle {
    from { bottom: -34px; }
    to { bottom: 0; }
}

<div class="row" id="recent-work">
            <div class="span-one-third">
                <a href="#" class="recent-project-image"><img src="http://dl.dropbox.com/u/1762184/recent-work01.png" width="300" height="168"></a>
                <a href="#" class="recent-project-title">Philly</a>
                <a href="#" class="recent-project-type">Video</a>
            </div>
</div>

Answer 1

Creo que si agrega la animación al estado sin desplazamiento, puede hacer que vuelvan a la transición. Ver mi ejemplo super-simple here .

Answer 2

Esto también se puede hacer con transiciones CSS, es menos potente pero más simple. La idea es tener un div que contenga los enlaces superior e inferior, pero es más grande que el envoltorio div, por lo que las partes están ocultas. Cuando se desplaza sobre él, reduce la altura para que los enlaces sean visibles. Para que sea animado de un lado a otro, agregue la "transición: altura 1s" al css del div. Si tengo tiempo más tarde, intentaré escribirlo.

Answer 3

No necesitas fotogramas clave para algo tan simple como esto.

Te hice una demo (con solo prefijos de -webkit para mantener las cosas simples).