Hacer cambios en porcentajes de animaciones CSS3 con jQuery

Hay un API de Animación en Javascript que permite trabajar con las animaciones declaradas con CSS a nivel de código. Web Animations API

Pero todavía no tiene soporte en los navegadores, solo soporte parcial en los navegadores modernos. Caniuse

Mientras tanto creo que lo más seguro sería hacerlo un poco a mano. Tener como varias clases de CSS. Cada una de ellas con el recorrido de animación parcial que quieres hacer. Dependiendo de donde estés y donde quieras llegar, le pones la clase de la animación que toque para hacer ese recorrido en concreto.

El código podría ser parecido a esto:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo</title>

<style type="text/css">

  #circulo {
    position: relative;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    background-color: orange;
  }
  
  .animacion_completa {
    animation: animacion 3s forwards;
  }

  .animacion_30_a_80 {
    animation: animacion_30_80 3s forwards;
  }

  @keyframes animacion {
    0%,20%{
      left: 0px; 
    }
    30%,40%{
      left: 250px;	
    }
    50%,60%{
      left: 500px;	
    }
    70%,80%{
      left: 750px;	
    }
    90%,100%{
      left: 1000px;	
    }
  }

  @keyframes animacion_30_80 {
    30%,40%{
      left: 250px;	
    }
    50%,60%{
      left: 500px;	
    }
    70%,100%{
      left: 750px;	
    }
  }
</style>
</head>
<body>
  <div id="circulo"></div>

  <button id="completa">Animación completa</button>
  <button id="30_80">Animación 30 a 80</button>

  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

  <script>
  $(() => {
    classes = ['animacion_completa', 'animacion_30_a_80'];
    target = $('#circulo');

    function removeAllClasesExcept(except) {
      classes.forEach((currentClass) => {
          if(currentClass != except) {
            target.removeClass(currentClass);
          }
        });
    }

    $('#completa').on('click', function() {
      removeAllClasesExcept('animacion_completa')
      target.addClass('animacion_completa');
    });
    $('#30_80').on('click', function() {
      removeAllClasesExcept('animacion_30_a_80')
      target.addClass('animacion_30_a_80');
    });

  });

  
  </script>
</body>
</html>

Alberto

610 16 42 18

Hacer cambios en porcentajes de animaciones CSS3 con jQuery

Respuestas