+ 6

CSS3 animation-duration changed by JavaScript

Hi guys. Need help with JavaScript method. How to change animation-duration while it is running? Code is on my profile. Tia

1st Mar 2017, 5:48 PM
Patrik Sokol
Patrik Sokol - avatar
5 Answers
+ 5
I have difficulties to understand your problem ^^ Actually, you are changing the 'animation-duration' property on click, through JS... and the animation slow efectively down after clicking on box: so the duration is changing? Which configuration are you using to test this code? Do you have try on many browsers/devices? The only thing I see, is that when changing the property, the curent animation is stoped, and the new duration one is starting from begining... so you cannot expect to make a progressive slow down with css animations: you need to handle it entirely by yourself, refreshing static values instead of be helped by css facilities ( same kind of limitations in interraction between css transitions and JS :P )
3rd Mar 2017, 8:20 AM
visph
visph - avatar
+ 3
It is working ( now? )... but changement occurs only when validating the alert box ^^ ( you should use console.log() for debugging instead of alert(), which stop the running process while waiting for user action )...
2nd Mar 2017, 9:19 AM
visph
visph - avatar
+ 3
@visph Actually it was ready for user interaction intentionally ^^ 😜 Ok no more alerts... Nope, it is not working. At first I tried to separate animation-duration in CSS and assign it to the box by class. After clicking, it changed the class to slower one properly. But no change in the duration. Now I made the duration in JavaScript. No change again.. @Andre But if i did not get you and you mean CSS variable, how would it help me? Please check the code again. Thank you
3rd Mar 2017, 7:35 AM
Patrik Sokol
Patrik Sokol - avatar
+ 2
I think this is a bug which hasn't been fixed yet.
3rd Mar 2017, 8:58 AM
Amin Al olofi
Amin Al olofi - avatar
+ 1
make the animation duration a variable
2nd Mar 2017, 5:54 AM
Andre van Rensburg
Andre van Rensburg - avatar