How To Create Play And Stop CSS Animation Using jQuery

In this blog,

We are going how to create play and stop CSS animation using jQuery.

Step-1: include the jQuery link in the <head>..</head>tag on index.html file.

<script src=""></script>

Step-2: Create Html Code in the index.html file.

  <div class="animate-box"> </div>
    <div class="buttons">
        <button type="button" class="play-animation">Play Animation</button>
        <button type="button" class="stop-animation">Stop Animation</button>

Step-3: Add CSS Code in the <style>…</style> on index.html file.

        margin: 0;
  .animate-box {
        height: 80vh;
        margin: 10px 0;
        background: url("fish-image.png") no-repeat left center #000;  
        -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */
        animation: test 4s infinite;
        background-size: contain;
    @-webkit-keyframes test {
        50% {background-position: right center;}
    /* Standard syntax */
    @keyframes test {
        50% {background-position: right center;}
        text-align: center;
    .buttons button{
        background: #000;
        color: #fff;
        padding: 10px;
        border-radius: 12px;

Step-4: Now I added code in my <script>…</script> tag on index.html file.

            $(".animate-box").css("animation-play-state", "running");
            $(".animate-box").css("animation-play-state", "paused");

Review the below video.

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories