jQuery css()
play and stop css animation
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Play and Stop CSS Animation</title> <style> .animated {// w w w . ja v a2 s . c o m height: 200px; margin: 10px 0; background: url("image1.png") no-repeat left center #e4eacf; -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */ animation: test 4s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes test { 50% {background-position: right center;} } /* Standard syntax */ @keyframes test { 50% {background-position: right center;} } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(document).ready(function(){ $(".play-animation").click(function(){ $(".animated").css("animation-play-state", "running"); }); $(".stop-animation").click(function(){ $(".animated").css("animation-play-state", "paused"); }); }); </script> </head> <body> <div class="animated"></div> <button type="button" class="play-animation">Play Animation</button> <button type="button" class="stop-animation">Stop Animation</button> </body> </html>