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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

    <ul>
      <li>testeo a</li>
      <li>testeo b</li>
      <li>testeo c</li>
      <li>testeo d</li>
    </ul>

<!-- end snippet -->