How to start the CSS animation again each time the button is clicked

Question

How to start the CSS animation again each time the button is clicked ...
I am surprised this topic wasn't covered in the course

Answer 1

Hop!

I have the solution:

window.onload=function() {
document.getElementById("body").addEventListener('animationend',function(e){ e.srcElement.style.animationName=""; });
};

... to insert juste before your function ( outside it )
The purpose is to set an event listener be called at end of animation. But to do that, we need page to be loaded, so we first set the window.onload event with a function which just set the 'animation-end' event of your dice ( #body ). In the function called then, you delete the value of property 'animationName', so on next click, the animation is replayed :)

Well, this need again few optimisations: it seems to animation-end event not fired if animation is aborted before the end... I've no test too what's the behaviour if you re-click before animation end: possibly nothing, but this is kind of case to anticipate ^^

Answer 2

You need to handle the click event in JavaScript and add/remove the corresponding CSS classes to your element.

Answer 3

I'm surprised how someone who made a good pure CSS code and got to Trending doesn't know how CSS onclick animation works...

Answer 4

JS :
document.getElementById("yourButton").onclick = function() { //some animation }

jQuery :
$("#yourButton").on("click", function() { //some animation })

Pure CSS :
#yourButton:active {animation-name : killyourself}
@keyframes killyourself { //some animation }

Answer 5

Post your animation on a code, I don't know what type of animation is that. Is that something like a box moving or what?

Answer 6

I'm no CSS expert. The only way I MIGHT help you is if you show me your code. I don't even know how rotating stuff in CSS works. Maybe you should consult lentin...

Answer 7

Allez hop:

https://code.sololearn.com/Wr4tHsgewY25/#js

Integrated, cleaning and working ;)

Answer 8

thanks to everyone especially visph looks like I have to the the name of the code like😋
(Dice - Utkarsh (feat. visph))

Answer 9

@visph I am trying your idea but I don't understand the part inside event listener braces('animationend', function.......)the complier isn't accepting it can you write it clearly , thanks

Answer 10

use JavaScript

Answer 11

@ashwaghosh that's not an answer

Answer 12

@cheeze that's actually what i am also surprised for 😑 but can you tell me how to put the animation on onclick

Answer 13

@cheze i know that but when i do that it works just once after that the button becomes useless ,i want to know how to reapeat the animation each time the button is clicked

Answer 14

its an animation to rotate a square 360deg each time the button is clicked

Answer 15

I posted it named dice

Answer 16

what's or who's lentin

Answer 17

Corrected my post:
You must place my statement OUTSIDE your function... ( else you add an event listener each time the button is clicked ^^ )

And I forgot the semi-colon after the last brackets Oo

Answer 18

Well, I can decompose it a few:

window.onload = function() {
var body = document.getElementById("body");
var eventName = 'animationend';
body.addEventListener(eventName, animEnd);
function animEnd(e) {
e.srcElement.style.animationName = "";
}
};

... I come from your code: you haven't to adapt my code ( you have replace the second parameter of the addEventListener() function by yours... it's absolutly not the behaviour expected! Just put my code in addition to yours, beside... and don't adapt anything on your ( previous ) code...

Answer 19

@visph thanks