Skip to main content

Como ampliar el area del hover

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>