Estoy configurando una sencilla animación que trae un poco de información adicional cuando se coloca el ratón sobre una imagen. El jQuery parte de copia de seguridad está escrito y funciona bien, aunque el problema que estoy teniendo problemas con el que está recibiendo la animación CSS3 para ir a la inversa, cuando el usuario se desplaza hacia fuera.

Así que cuando se coloca en ella las grandes obras, pero tan pronto como pasa el ratón los elementos simplemente desaparecen. Lo que me gustaría saber es si hay una manera de llegar a ellos para animar hacia atrás cuando el ratón se sitúa en otro lugar. Muchas gracias!

CSS:

#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; }
}

HTML:

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

  • Impresionante animación en el momento. +1 yo voy a ver si puedo averiguar la inversa.
  • Gracias, Juan. Echa un vistazo bookcasey la respuesta para una solución mucho más sencilla de lo que tenía.
InformationsquelleAutor Andrew | 2011-11-23

3 Comentarios

  1. 12

    Usted no necesita fotogramas clave para algo tan simple como esto.

    Te hice una demo (con sólo -webkit vender prefijos para mantener las cosas simples).

    • Wow, que hace un infierno de mucho más sentido que la forma en que yo lo hice. Gracias por la ayuda!
    • He aprendido mucho de esta cuestión. Bueno Andrew
    • FYI2, Esto no funciona para IE8 ya que este es un CSS3+ sólo por la capacidad. IE8 utiliza 2.1 (Windows XP)
  2. 2

    Esto también se puede hacer con las transiciones de la CSS, es menos potente pero más sencillo.
    La idea es tener un div que contiene la parte superior e inferior enlaces, pero es más grande que el contenedor div, para que las partes están ocultos. Cuando se coloca el ratón sobre ella, se reduce la altura por lo que los enlaces son visibles. Para hacer anime de ida y vuelta de agregar el «de la transición : la altura 1s» para el css del div. Si voy a tener el tiempo más tarde, voy a tratar de escribir.

  3. 1

    Me creer si se agrega la animación a la no-pase estado, usted puede conseguir a la transición de regreso. Ver mi super-simple ejemplo aquí.

    • Sí, sólo funciona incluso si se quita la transition propiedades en el estado hover 🙂
    • Los inconvenientes del uso de una transición, como en tu ejemplo es que sólo a los efectos de que el elemento es, por lo que es imposible tener más complicado animaciones (como los que afectan a otros elementos como resultado de asomar un elemento).

Dejar respuesta

Please enter your comment!
Please enter your name here