Executing keyframes animation in JS or jQuery

Question

I know that it is possible to set the animation of an element by id either in a stylesheet or in JS from the DOM. The issue is that I want the animation to execute every time a click action on a specific element is performed by the user. Adding the animation to an element's style in JS seems to add it permanently so that the keyframes animation cannot be performed again, (only performed once when the window finishes loading). I also thought about using jQuery's .animate() function however all documentation points to it animating over CSS specific styles and not setting/calling the animation style attribute as if I were to set it using CSS. I want to know the best way of executing my animation over an element when another element is clicked on by the user and consistently executing the animation for each click.

@keyframes fadeInDown {
  from {
   opacity: 0;
   transform: translate(0, -20%);
 }
 to {
   opacity: 1;
   transform: translate(0, 0);
 }
}

The current way I'm setting animation for an element:

$("#element").css("animation", "fadeInDown 0.5s ease-in 0s 1");

Answer 1

It's my first answer on stack overflow. I had the same question about animation.

What I did last was just like Vivek Patel's answer, but instead of toggling the css keyframe, I created a separated class only for css animation("animation-fadeInDown"), and toggle it.

Because the animation-name "fadeInDown" is correponding to the @keyframes name, so if you separate it you could apply the animation to other elements, by just toggling the animation class.

And, you can still do the css deco to the original box seperately, which might be more clear to read.

I hope this is close to what you looking for.

$('button').click(() => {
  $('.box').toggleClass('animation-fadeInDown');
});

.box {
  width: 50px;
  height: 50px;
  background: black;
}

.animation-fadeInDown {
  animation: fadeInDown 0.5s ease-in 0s 1
}

@keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translate(0, -20%);
    }
    to {
      opacity: 1;
      transform: translate(0, 0);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<button>
    Test
</button>

Answer 2

Basically CSS animation only runs once when the page loads. So it is not possible to re-trigger it again. Here is the workaround for your use case: Remove the element from the page entirely and re-insert it.

Try this:

$('button').click(() => {
  var oldDiv = $('#animated-div');
  newDiv = oldDiv.clone(true);

 	oldDiv.before(newDiv);

	$("." + oldDiv.attr("class") + ":last").remove();
});

@keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translate(0, -20%);
    }
    to {
      opacity: 1;
      transform: translate(0, 0);
    }
}

.animated-div {
  animation: fadeInDown 0.5s ease-in 0s 1
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="animated-div" class="animated-div" style="width: 50px; height: 50px; background: black"></div>
<button>
Test
</button>

Answer 3

This is an simple example that use jquery to animate in Queue as it works in @keyframes. The transition duration and animation duration gives more control on the animation character.

$(document).ready(function() {
  $('button').click(function() {
    $('.box')
      .css('transition', 'all 0.2s')
      .animate({ opacity: 0 }, {
        duration: 200,
        step: function(now) {
          $(this).css({ opacity: now });
          $(this).css({ transform: 'translate(0, -20%)' });
        }
      })
      .animate({ opacity: 1 }, {
        duration: 600,
        step: function(now) {
          $(this).css({ opacity: now });
          $(this).css({ transform: 'translate(0, 0)' });
        }
      })
  });
});

.box {
  background: red;
  height: 50px;
  width: 50px;
  position: absolute;
  margin-top: 50px;
  margin-left: 50px;
}

<button>Test</button>
<div class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>