Trigger CSS Animations in JavaScript

Trigger CSS Animations in JavaScript

The simplest method to trigger CSS animations is by adding or removing a class - how to do this with pure Javascript you can read here:

How do I add a class to a given element?

If you DO use jQuery (which should really be easy to learn in basic usage) you do it simply with addClass / removeClass.

All you have to do then is set a transition to a given element like this:

.el {
    width:10px;
    transition: all 2s;
}

And then change its state if the element has a class:

.el.addedclass {
    width:20px;
}

Note: This example was with transition. But for animations its the same: Just add the animation on the element which has a class on it.

There is a similar question here: Trigger a CSS keyframe animation via scroll

How to trigger a css animation with vanilla javascript

I think adding class is a healthy way to do it.

Check the example here: https://codepen.io/yasgo/pen/zYBgjXN

document.getElementById('box').classList.add('active-animation');

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

.box.active-animation {
  animation: party 5s infinite;
}

@keyframes party{
    0% {background-color: red;}
    10% {background-color: orange;}
    20% {background-color: yellow;}
    30% {background-color: green;}
    40% {background-color: blue;}
    50% {background-color: purple;} 
}

<div id="box" class="box"></di>

Trigger CSS Animation on div click

Note that in your code, the elements that have "animation" css rules are the LI elements. So changing the animation property of the UL's style won't work.

Here I changed your CSS a bit so that you can give the UL the class of "animate" and the child LIs will animate. When you press the button it removes that class, and then using a setTimeout re-adds it, it should reset and replay the animation.

document.getElementById("clickable").addEventListener("click", controlAnimation);

function controlAnimation() {
  const menu = document.querySelector('#menu-main-menu');
  menu.classList.remove('animate');
  setTimeout(() => {
    menu.classList.add('animate');
  }, 0);
}

#menu-main-menu li {
  border-bottom: solid 1px #999;
}

#menu-main-menu.animate li {
  opacity: 0;
  -webkit-animation: fadeInMenu 0.5s 1;
  animation: fadeInMenu 0.5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#menu-main-menu.animate li:nth-child(5n+1) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

#menu-main-menu.animate li:nth-child(5n+2) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

#menu-main-menu.animate li:nth-child(5n+3) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

#menu-main-menu.animate li:nth-child(5n+4) {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

#menu-main-menu.animate li:nth-child(5n+5) {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

/* Animation steps */

@-webkit-keyframes fadeInMenu {
  0% {
    opacity: 0.0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1.0;
  }
}

@keyframes fadeInMenu {
  0% {
    opacity: 0.0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1.0;
  }

<div id="clickable" >Click me</div>
<br>
<ul id="menu-main-menu" class='animate'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>

</ul>

How to trigger CSS animation

I am unable to reproduce the issue you described with your CSS.

See sample below:

This answer will be deleted once the question is edited with a mcve.

Please note:

If you question is about best practices, then it'd be off-topic for StackOverflow. See our how to ask page

$(function() {  $("#test-btn").on('click', function() {    $("#test").addClass('animation');  });});

.animation {  margin-left: 20px;  margin-top: 20px;  width: 50px;  height: 0px;  background: maroon;  position: absolute;  animation-name: example;  animation-duration: 3s;  animation-fill-mode: forwards;  animation-delay: 0s;}
@keyframes example {  from {    transform: translateY(200px)  }  to {    height: 200px;    background-color: teal;  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test-btn">Animate</button><hr/><div id="test"></div>

Trigger CSS Animation on Click via javascript

A bit ugly, because of the extra class needed, but it works:

var hamburgerMenu = document.querySelector('.hamburger-menu');
hamburgerMenu.addEventListener('click', function() {
  var hamburgerMenuSpan2 = document.querySelector('.hamburger-second');

  if (hamburgerMenuSpan2.classList.contains("animate-out")) {
    hamburgerMenuSpan2.classList.remove("animate-out");
    hamburgerMenuSpan2.classList.add("animate-in");
  } else {
    hamburgerMenuSpan2.classList.add("animate-out");
    hamburgerMenuSpan2.classList.remove("animate-in");
  }

});

.hamburger-menu {
  position: absolute;
  top: 20px;
  right: 20px;
}

.hamburger-line-2 {
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

.animate-out {
  animation-name: animate-out;
}

.animate-in {
  animation-name: animate-in;
}

@keyframes animate-out {
  0% {
    width: 40px;
  }
  100% {
    width: 0px;
  }
}

@keyframes animate-in {
  0% {
    width: 0px;
  }
  100% {
    width: 40px;
  }
}

.hamburger-menu span {
  display: block;
  width: 40px;
  height: 2px;
  background: black;
  margin: 10px 0px;
}

<div class="hamburger-menu">
  <span class="hamburger-line-1"></span>
  <span class="hamburger-second hamburger-line-2"></span>
  <span class="hamburger-line-3"></span>
</div>

Is there a feasible way to trigger CSS keyframe animation using JS?

see here jsfiddle

if you want your animation to work every time you press the button use this code :

$('button').click(function() {
    $(".fademe").addClass('animated');
    setTimeout(function() {
      $(".fademe").removeClass('animated');
    }, 1500);
});

where 1500 is the animation-duration in this case, 1.5s

$('button').click(function() {  $(".fademe").addClass('animated');  setTimeout(function() {    $(".fademe").removeClass('animated');  }, 1500);});

.fademe {  width: 100px;  height: 100px;  background: red;}
.fademe.animated {  animation: fade-in 1.5s ease;}

@keyframes fade-in {  0% {    opacity: 0;  }
  100% {    opacity: 1;  }}

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

How to trigger a CSS animation from JS?

You can add and remove the class of the animation with JS using classList.

Add:

object.classList.add('balloon');

Remove:

object.classList.remove('balloon');

Working example:

const add = () => {  document.getElementById('balloon').classList.add('animation')}
const remove = () => {  document.getElementById('balloon').classList.remove('animation')}

@keyframes pop {  from {    opacity: 1;    transform: translateZ(0) scale(1, 1);  }  to {    opacity: 0;    transform: translateZ(0) scale(1.5, 1.5);  }}
.animation {  animation: pop 0.5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;}
.balloon {  height: 125px;  width: 110px;  background-color: #FF6B6B;  border-radius: 50%;}
.controls{  position: absolute;  bottom: 10px;  right: 10px;}

<div id="balloon" class="balloon" onmouseover="add()"></div><div class="controls">  <button onClick="add()">Hide</button>  <button onClick="remove()">Show</button></div>

---

Related Topics