> Faqs > Hacer cambios en porcentajes de animaciones CSS3 con jQuery

Hacer cambios en porcentajes de animaciones CSS3 con jQuery

Hola, saludos.

Tengo la siguiente duda ¿como puedo decidir con jquery que porcentaje de la animación será el que se ejecute?

Por ejemplo: quisiera que si estoy en el porcentaje 30%,40% pase a 70%,80% con jQuery.

¿Es posible esto? Quedo atento a sus respuestas, gracias.

@keyframes animacion{
 0%,20%{
   left:0px; 
 }
 30%,40%{
   left:-999px;	
 }
 50%,60%{
   left:-1997px;	
 }
 70%,80%{
   left:-2995px;	
 }
 90%,100%{
   left:-3993px;	
 }
}
Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

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
165 8 12 8