CSS3 animation-duration changed by JavaScript

Question

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

Answer 1

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 )

Answer 2

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 )...

Answer 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

Answer 4

I think this is a bug which hasn't been fixed yet.

Answer 5

make the animation duration a variable