How to trigger CSS animation [duplicate]

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 minimal reproducible example to your question (including HTML) - otherwise it's hard to tell exactly where the issue lies. — blurfus
– blurfus, Commented Jul 26, 2018 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
– Codelly, Commented Jul 26, 2018 at 20:02
but where is the div and the button? do you get any errors? all those factors come to play — blurfus
– blurfus, Commented Jul 26, 2018 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
– Codelly, Commented Jul 26, 2018 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
– blurfus, Commented Jul 26, 2018 at 20:17

Nimantha · Accepted Answer · 2023-11-08 17:21:35Z

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

See sample below:

$(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>

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 the idea is to post the minimal code necessary to reproduce the issue. Welcome to StackOverflow! I am glad both answers were helpful

Rick · Accepted Answer · 2018-07-26 19:46:30Z

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.
You're welcome! If you have further issues, please post it on SO, but keep up the rules regarding the MCVE. ;)
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 !

Collectives™ on Stack Overflow

How to trigger CSS animation [duplicate]

2 Answers 2

5 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Linked

Related