Déclencher/arrêter une animation CSS via Javascript

Vous pouvez utiliser la propriété animationPlayState du style DOM HTML pour spécifier si une animation est en cours d’exécution ou en pause.
Déclencher arrêter une animation CSS via JQuery

Syntaxe :
animation-play-state: running|paused|initial|inherit;
  • running: Cette valeur est utilisée pour exécuter / lire une animation.
  • paused: cette valeur est utilisée pour suspendre une animation.
  • initial: cette valeur définit la propriété animation-play-state sur la valeur de l’élément parent.
  • inherit: cette valeur est utilisée pour définir la propriété .animation-play-state sur default (en cours d’exécution).

 
 

Code HTML:
<!DOCTYPE html>
<html>
  <head>
    <title>Déclencher/arrêter une animation CSS</title>
    <style>
      /* Mettez le code css ici. */
    </style>
    <script type="text/javascript">
      // Mettez le code javascript ici.
    </script>
  </head>
  <body>
    <div class="display-anim"></div>
    <button type="button" id="play_stop">Déclencher/Arrêter</button>
  </body>
</html>

 

Code Javascrip:
    var anim = document.querySelectorAll('.display-anim');

    document.getElementById('play_stop').onclick = function () {
        for (var i = 0; i < anim.length; i++) {
            if (anim[i].style.animationPlayState == 'paused') {
                anim[i].style.animationPlayState = 'running';
            }
            else {
                anim[i].style.animationPlayState = 'paused';
            }
        }
    }

 
 

Code CSS:
.display-anim {
    height: 250px;
    margin: 12px 0;
    background: url("https://1.bp.blogspot.com/-SEBMg2X0IqM/XRyfgTMBBkI/AAAAAAAAFEE/_xBgKj-gxtY1MybpCBCmDIUL-_Jtjl6FQCLcBGAs/s320/car.png") no-repeat left center #57A6F6;
    -webkit-animation: test 4s infinite;
    animation: test 4s infinite;
}

@-webkit-keyframes test {
    50% {
        background-position: right center;
    }
}

@keyframes test {
    50% {
        background-position: right center;
    }
}
Résultat
Déclencher/arrêter une animation CSS
QCM Javascript

2 réflexions sur “Déclencher/arrêter une animation CSS via Javascript

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *