Skip to main content

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>

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>

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>

Origen Enlace

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:

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>