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

décembre 31, 2019février 10, 2020 Thomas Aucun commentaire

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 JavascriptVous 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.

QCMs qui pourraient vous intéresser :

Code HTML:

Code JQuery:

Code CSS:

Vous pourrez aussi aimer

Comment ajouter ou supprimer des lignes dans un Tableau en jQuery

Comment vérifier si un élément HTML est visible en jQuery

JQuery Toggle Slide – De gauche à droite

Laisser un commentaire Annuler la réponse