1

Estoy animando una lista con :hover en CSS, pero al moverse los li se me detiene la animacion a la mitad, existe alguna solucion mediante CSS?

Aqui el codigo:

li:hover {
  width: 100%;
  animation: desliza 1s 0.5s 2 linear, desaparece 1s 0.5s 2 linear;
  cursor: hand;
  cursor: pointer;
}

@keyframes desliza {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 100px;
  }
}

@keyframes desaparece {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
<ul>
  <li>testeo a</li>
  <li>testeo b</li>
  <li>testeo c</li>
  <li>testeo d</li>
</ul>

1
  • Podrias explicar un poco mejor a que te refieres con que "se detiene a la mitad"? Cual es el comportamiento que esperas?
    – IvanS95
    Commented el 25 mar. 2019 a las 18:29

2 respuestas 2

5

Esto es mejor que lo hagas con una transición, así al quitar el :hover vuelve suavemente a su estado inicial. Y para evitar que se pierda el foco del :hover, puedes no mover el propio elemento donde haces el :hover sino su contenido

 li{
          overflow:hidden;
}
li:hover {
  width: auto;
  cursor: hand;
  cursor: pointer;

}
 li div {
 transition: all ease 0.5s;
 transform: translatex(0);
opacity:1;
}
 li:hover div {
 transform: translatex(100px);
opacity:0;
}
<ul>
  <li><div>testeo a</div></li>
  <li><div>testeo b</div></li>
  <li><div>testeo c</div></li>
  <li><div>testeo d</div></li>
</ul>

1

Como ya ha comentado otro usuario puedes usar transition para lo que quieres hacer. Si no quieres cambiar el HTML puedes animar la indentación, así el li no se desplaza y no pierdes el :hover cuando el texto se mueve:

li {
  transition: all 0.5s linear;
  opacity: 1;
  list-style: none;
}

li:hover {
  text-indent: 100px;
  opacity: 0;
}
<ul>
  <li>testeo a</li>
  <li>testeo b</li>
  <li>testeo c</li>
  <li>testeo d</li>
</ul>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.