+ 3

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

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

12th Jan 2017, 2:42 PM
Utkαrsh
Utkαrsh - avatar
19 Answers
+ 6
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 ^^
12th Jan 2017, 4:23 PM
visph
visph - avatar
+ 5
You need to handle the click event in JavaScript and add/remove the corresponding CSS classes to your element.
12th Jan 2017, 2:53 PM
James Flanders
+ 5
I'm surprised how someone who made a good pure CSS code and got to Trending doesn't know how CSS onclick animation works...
12th Jan 2017, 3:09 PM
David Sebastian Keshvi Illiakis
David Sebastian Keshvi Illiakis - avatar
+ 5
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 }
12th Jan 2017, 3:15 PM
David Sebastian Keshvi Illiakis
David Sebastian Keshvi Illiakis - avatar
+ 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?
12th Jan 2017, 3:29 PM
David Sebastian Keshvi Illiakis
David Sebastian Keshvi Illiakis - avatar
+ 4
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...
12th Jan 2017, 3:33 PM
David Sebastian Keshvi Illiakis
David Sebastian Keshvi Illiakis - avatar
+ 4
Allez hop: https://code.sololearn.com/Wr4tHsgewY25/#js Integrated, cleaning and working ;)
12th Jan 2017, 5:35 PM
visph
visph - avatar
+ 4
thanks to everyone especially visph looks like I have to the the name of the code like😋 (Dice - Utkarsh (feat. visph))
12th Jan 2017, 5:52 PM
Utkαrsh
Utkαrsh - avatar
+ 3
@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
12th Jan 2017, 4:43 PM
Utkαrsh
Utkαrsh - avatar
+ 2
use JavaScript
12th Jan 2017, 2:44 PM
Ashwaghosh Sadanshiv
Ashwaghosh Sadanshiv - avatar
+ 2
@ashwaghosh that's not an answer
12th Jan 2017, 2:47 PM
Utkαrsh
Utkαrsh - avatar
+ 2
@cheeze that's actually what i am also surprised for 😑 but can you tell me how to put the animation on onclick
12th Jan 2017, 3:12 PM
Utkαrsh
Utkαrsh - avatar
+ 2
@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
12th Jan 2017, 3:27 PM
Utkαrsh
Utkαrsh - avatar
+ 2
its an animation to rotate a square 360deg each time the button is clicked
12th Jan 2017, 3:30 PM
Utkαrsh
Utkαrsh - avatar
+ 2
I posted it named dice
12th Jan 2017, 3:34 PM
Utkαrsh
Utkαrsh - avatar
+ 2
what's or who's lentin
12th Jan 2017, 3:36 PM
Utkαrsh
Utkαrsh - avatar
+ 2
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
12th Jan 2017, 4:30 PM
visph
visph - avatar
+ 2
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...
12th Jan 2017, 5:28 PM
visph
visph - avatar
+ 2
@visph thanks
12th Jan 2017, 5:38 PM
Utkαrsh
Utkαrsh - avatar