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

Vous 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 d’un cycle.
Déclencher/arrêter une animation CSS via JavascripDéclencher/arrêter une animation CSS via JavascripVous 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. Syntaxe : animation-play-state:…Lire plus  

Code HTML:
<!DOCTYPE html>
<html>
	<head>
		<title>Déclencher/arrêter une animation CSS</title>
		<style>
			/* Mettez le code css ici. */
		</style>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			// Mettez le code JQuery ici.
		</script>
	</head>
	<body>
		<div class="display-anim"></div>
		<button type="button" class="off">Arrêter une animation</button>
		<button type="button" class="on">Déclencher une animation</button>
	</body>
</html>

 

Code JQuery:
$(document).ready(function() {
    $(".on").click(function() {
        $(".display-anim").css("animation-play-state", "running");
    });
    $(".off").click(function() {
        $(".display-anim").css("animation-play-state", "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
Note : Les animations CSS ne fonctionnent pas dans Internet Explorer 9 et les versions antérieures.
QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
Partagez cet article

Laisser un commentaire

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