Hi, anyone knows how to change the animation-duration of a keyframe using js . | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 4

Hi, anyone knows how to change the animation-duration of a keyframe using js .

I tried the code above but still doesn't work. .

27th Feb 2017, 4:53 PM
Amin Al olofi
Amin Al olofi - avatar
19 Answers
28th Feb 2017, 11:46 AM
Patrik Sokol
Patrik Sokol - avatar
+ 5
well, I could not find anything on mobile. just an idea, what about changing the animation class with a new animation duration?
28th Feb 2017, 11:57 AM
Patrik Sokol
Patrik Sokol - avatar
+ 4
Ok try style.webkitAnimationDuration on Chrome and Safari and style.mozAnimationDuration on Firefox
28th Feb 2017, 11:38 AM
Patrik Sokol
Patrik Sokol - avatar
+ 4
can you show me your CSS declaring animation duration please?
28th Feb 2017, 11:43 AM
Patrik Sokol
Patrik Sokol - avatar
+ 4
should be already fixed. i am looking for a code
28th Feb 2017, 11:50 AM
Patrik Sokol
Patrik Sokol - avatar
+ 4
glad to hear that my friend.
28th Feb 2017, 11:51 AM
Amin Al olofi
Amin Al olofi - avatar
+ 3
document.getElementById('box1').style.animationDuration="10s";
27th Feb 2017, 5:29 PM
Patrik Sokol
Patrik Sokol - avatar
+ 3
Do you use jQuery or not?
27th Feb 2017, 5:55 PM
Patrik Sokol
Patrik Sokol - avatar
+ 3
I am using js only
27th Feb 2017, 6:03 PM
Amin Al olofi
Amin Al olofi - avatar
+ 3
can you post your code (full)?
27th Feb 2017, 6:04 PM
Patrik Sokol
Patrik Sokol - avatar
+ 3
can we change the animation-duration while itis running?
28th Feb 2017, 7:03 AM
Amin Al olofi
Amin Al olofi - avatar
+ 3
function a(){ var elem = document.getElementById("box1"); elem.style.animationDuration = "200ms" ; };
28th Feb 2017, 7:05 AM
Amin Al olofi
Amin Al olofi - avatar
+ 3
it is working to change animation color. function b(){ var elem = document.getElementById ("box1"); elem.style.backgroundColor= "blue"; };
28th Feb 2017, 11:32 AM
Amin Al olofi
Amin Al olofi - avatar
+ 3
I already tried this way still doesn't work.
28th Feb 2017, 11:41 AM
Amin Al olofi
Amin Al olofi - avatar
+ 3
#box1{ position: absulte; width: 50px; height:50px; background: yellow; border: 1px solid black; animation-duration: 5s; -webkit-animation-name: demo1; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: 5; -
28th Feb 2017, 11:46 AM
Amin Al olofi
Amin Al olofi - avatar
+ 2
tried it didn't work. thanks for trying.
27th Feb 2017, 5:54 PM
Amin Al olofi
Amin Al olofi - avatar
+ 2
of course with html and css
27th Feb 2017, 6:03 PM
Amin Al olofi
Amin Al olofi - avatar
+ 2
so it will not work!!
28th Feb 2017, 11:49 AM
Amin Al olofi
Amin Al olofi - avatar
+ 2
I did not get you.
28th Feb 2017, 12:38 PM
Amin Al olofi
Amin Al olofi - avatar