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:
Document 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;
}
}
</style>
<ul>
<li>testeo a</li>
<li>testeo b</li>
<li>testeo c</li>
<li>testeo d</li>
</ul>
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>