Change Webkit properties through Javascript?

Please help me, Might be cause I'm fairly new to CSS Animations and Javascript but I am using a code that is suppose to change the properties of it and when I run the code it does everything else with in the code except for change the properties in CSS of the desired div. I've tried all four of these and none of them seem to work, are they out of date? Is there a new way of doing this or what? None of them work at all.

document.getElementById('playBar').style.webkitAnimationDuration = 20 + "s";
document.getElementById('playBar').style.animationDuration = 20 + "s";
document.getElementById('playBar').style['-webkit-transition-duration'] = '50s';

value = Math.floor((100 / duration) * currentTime);
document.getElementById('playBar').setAttribute("style","-webkit-filter:grayscale(" + value + "%)")

CSS CODE

#playBar {
width: 1px;
height: 12px;
background: white;
float:left;
-webkit-animation: mymove infinite; /* Chrome, Safari, Opera */
-webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
animation: mymove infinite;
animation-duration: 0s;
}

/* Chrome, Safari, Opera */
-webkit-keyframes mymove {
from {width: 0%;}
to {width: 100%;}
}

@keyframes mymove {
from {width: 0%;}
to {width: 100%;}
}

Answers:

Answer

instead of

this.style['-webkit-transition-duration'] = '50s'

use

this.style.WebkitTransitionDuration="50s"

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.