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 JQueryDéclencher/arrêter une animation CSS via JQueryVous pouvez utiliser la méthode css() de jQuery en combinaison avec la propriété animation-play-state de CSS3 pour lire et arrêter les animations CSS au milieu…Lire plus

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 JavascriptQCM Javascript – Partie 1QCM sur Javascript avec des réponses pour la préparation des tests techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus

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 *