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%;}
}

回答1:

instead of

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

use

this.style.WebkitTransitionDuration="50s"