Estoy usando animación de fotogramas clave y estoy usando marcadores que cuando pasas el cursor sobre ellos, aparecerá información o una imagen. Agregué un fundido de entrada, pero no sé cómo hacer que desaparezca.
Tengo la parte de fotogramas clave:

@keyframes fadeout {
0% {
  opacity: 1;}
100% {opacity: 0;}
}
.fadeout {
-webkit-animation-name: fadeout;
animation-name: fadeout;
}

Y esta es la parte de animación (?) Que quiero insertar:

animation-duration: 0.5s;
animation-name: fadeout;

Supongo que mi problema es que no sé cómo insertarlo.

Este es el codepen que estoy usando:

http://codepen.io/aslenwhitmore/pen/rxLYgQ?editors=0100

Entonces, ¿alguien puede decirme dónde debo insertar el desvanecimiento? ¡Gracias!

0
Aslen Whitmore 29 ene. 2016 a las 03:36

2 respuestas

La mejor respuesta

Puede lograr el efecto deseado utilizando la propiedad transition que activa un estado de opacidad al pasar el mouse. No hay necesidad de javascript ya que CSS le permite manipular elementos secundarios del selector al pasar el mouse u otros estados.

Vea mi bifurcación de codepen para un ejemplo de trabajo

Dado que CSS no puede realizar la transición de la propiedad display, solo usaremos opacidad y z-index.

El z-index ocultará los elementos debajo del documento (z-index:-1) y los traerá al 999 una vez activado

Código flotante

&:hover .map-marker-info {
    opacity:1;
    z-index:999;
}

Código estático

&-marker-info {
   display: block;
   transition:0.3s;
   opacity: 0;
   z-index: -1;
}

PD: recomiendo aumentar el radio de la zona de desplazamiento para que los puntos sean más fáciles de usar

3
Aziz 29 ene. 2016 a las 01:07

Simplemente cambie su animación a una transición.

Establezca la opacidad de la ventana emergente de información en 0. Luego, establezca su opacidad :hover en 1. Ahora cambie el bit animation: fade-in 1s a transition: opacity 1s.

0
Nikk 29 ene. 2016 a las 01:04