How to trigger CSS animation

Question

I am new to CSS but do know the basics, I want to trigger this animation by using a button. I cannot get it to work.

I used a couple of examples here in Stackoverflow, Jquery, Jscript, but none seem to refer to the @keyframes .

I see more about referring to an animation via classes and removing classes (As I understand this way to restart the animation by removing the element). I tried switching it to classes.

I also then wonder what is best practise?

What is the best way? I thought it would be simple, but I was mistaken.....

I have CSS like so:

#test {
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;}
}

Please add a [mcve] to your question (including HTML) - otherwise it's hard to tell *exactly* where the issue lies. — blurfus, Jul 26 '18 at 19:15
Basically this is all the code, it refers to a div with the id test. The animation I want to have it work on click. — Codelly, Jul 26 '18 at 20:02
but where is the `div` and the `button`? do you get any errors? all those factors come to play — blurfus, Jul 26 '18 at 20:03
I removed it, I dont seem to be able to get it to work. Thats why I only showed the CSS. The answer below seems to work here ! So I attempting this ! But I am doing something wrong — Codelly, Jul 26 '18 at 20:15
exactly! if you remove what you have done, how are we to help you fix it? we can only *guess* at what the answer might look like at this point but not really be able to tell you why your code is not working — blurfus, Jul 26 '18 at 20:17
Because I dont want to make it longer then necessary. I removed my code and have been searching ever since. I did not even have the code anymore. If I had it I could have posted it. I did not even know where to start anymore. It was a div and this css, thats all. I did not expect a simple animation button was such a hassle ! But the question has been answered. Next time I will makes sure I will post my last attempt. Thank you :) — Codelly, Jul 26 '18 at 20:28

score 2 · Accepted Answer · answered Jul 26 '18 at 19:24

2

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>

answered Jul 26 '18 at 19:24

blurfus

13,485
8
55
61

Thank you for the Jquery edition of the answer. I am learning a lot by this. But I apparently have made a mistake ? I should have posted everything? I thought I did it right. But previously a commenter already mentioned I should post the html. Thing is, it was only a div and a button with no referal to a code anymore. – Codelly Jul 26 '18 at 20:31
1

Oh that was you as well :) – Codelly Jul 26 '18 at 20:32
@Codelly the idea is to post the minimal code necessary to reproduce the issue. Welcome to StackOverflow! I am glad both answers were helpful – blurfus Jul 26 '18 at 20:32
Okay will do next time ! Thank you much ! – Codelly Jul 26 '18 at 20:34
@Codelly you are welcome. Glad I could help – blurfus Jul 26 '18 at 20:35

Rick · Answer 2 · 2018-07-26T19:46:30.830

In case you decide to scrap jQuery (or you have to work without it), in order to toggle the CSS animation on your #test element using vanilla JavaScript, separate your animation-related CSS properties into a class:

.animate {
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

Then toggle (add/remove) the .animate class on the #test element:

button.addEventListener('click', function() {
  if (isAnimating) {
    element.classList.remove('animate');
    button.innerHTML = 'Add animation';
  } else {
    element.classList.add('animate');
    button.innerHTML = 'Remove animation';
  }

  isAnimating = !isAnimating;
});

var element = document.getElementById('test');
var button = document.getElementById('toggle');
var isAnimating = false;

button.addEventListener('click', function() {
  if (isAnimating) {
    element.classList.remove('animate');
    button.innerHTML = 'Add animation';
  } else {
    element.classList.add('animate');
    button.innerHTML = 'Remove animation';
  }
  
  isAnimating = !isAnimating;
});

#test {
  margin-left: 20px;
  margin-top: 20px;
  width: 50px;
  height: 0px;
  background: maroon;
  position: absolute;  
}

.animate {
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

#toggle {
  margin-left: 100px;
}

@keyframes example {
  from {
    transform: translateY(200px)
  }
  to {
    height: 200px;
    background-color: teal;
  }
}

<div id="test"></div>
<button id="toggle">Add animation</button>

Thank you that is a very clear explanation, I will also learn the Jquery version of it. I am trying it out now. It seems to have some issues at my side. But it works here on the site. I must be doing something wrong. — Codelly, Jul 26 '18 at 20:13
You're welcome! If you have further issues, please post it on SO, but keep up the rules regarding the [**MCVE**](https://stackoverflow.com/help/mcve). ;) — Rick, Jul 26 '18 at 20:15
Thank you!!! I had to put this around the code : window.onload=function(){ the code you provided } Because it gave me the Cannot read property 'addEventListener' of null. I have not heard of Vanilla Jscript, I assumed its not the best way :) But it is so nice to see it work. I will improve the code now ! — Codelly, Jul 26 '18 at 20:23

How to trigger CSS animation

2 Answers2