Cómo hacer una animación jQuery que se repite indefinidamente

Es una idea pésima hacer animaciones con jQuery. Es infinitamente mejor usar CSS, por versatilidad, reusabilidad, por rendimiento y quién sabe cuántos más motivos.

Por ejemplo, puedes hacer una animación de ida y vuelta que se repita infinitamente, indicando los valores "alternate infinite" a declarar la animación con CSS.

Te dejo un ejemplo de animación CSS para que puedas jugar un poco:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Animación infinita</title>

    <style>
      .elementoAnimado {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        background-color: orange;
        color: #fff;
        border-radius: 10px;
        position: relative;
        width: 100px;
        height: 100px;
        font-size: 0.85rem;
        animation: infinta 10s alternate infinite linear;
      }

      @keyframes infinta {
        0% {
          top: 100px;
          left: 40px;
          -webkit-transform: rotate(0deg);
        }
        20% {
          top: 120px;
          left: 50px;
          -webkit-transform: rotate(20deg);
        }
        90% {
          top: 190px;
          left: 220px;
          -webkit-transform: rotate(340deg);
        }
        100% {
          top: 200px;
          left:240px;
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="elementoAnimado">
      Soy una animación infinita!!!
    </div>
  </body>
</html>

Puedes aprender más sobre animaciones CSS aquí.

Julian

1147 49 87 46

En jQuery tienes las colas de efectos para encadenar animaciones, o como es tu caso, hacer una animación que se invoca otra vez después de que ha terminado.

Gracias a las colas de efectos conseguirás tú objetivo de realizar una animación que se repite indefinidamente.

Colas de efectos jQuery

Salva

268 3 19 4

Como último recurso puede estar bien, pero es mejor usar CSS porque aprovechas las capacidades del navegador y el hardware de GPU

Cómo hacer una animación jQuery que se repite indefinidamente

Respuestas