更改动画持续时间 CSS3 在 Chrome 中不起作用

Question

I have this demo . When you click div duration animation must change but it does not work on Chrome.

This is my js code:

var seconds = 1;
function ChangeSpeed(){
    seconds++;
    document.getElementById('rectangle').style.animationDuration = seconds+"s";
}

And this is my css:

div#rectangle{
    height:100px;
    width:100px;
    background:black;
    -webkit-animation: ShapeRotate; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
}

@-webkit-keyframes ShapeRotate {
    from {
      -webkit-transform: rotate(0deg);
    }
    to { 
      -webkit-transform: rotate(360deg);
    }
}

I also tried this demo on Firefox and it works!

I can not figure out why this is not working on Chrome.

My Chrome version is 35.0.1916.153 (Build oficial 274914) m

Answer 1

I Think I've found your mistake.

On your fiddle the code appears like this

var seconds = 1;
function ChangeSpeed(){
    seconds++;
    document.getElementById('rectangle').style.mozAnimationDuration = seconds+"s";
}

I think that you should add compatibility to all browsers. Your mistake is on:

style.mozAnimationDuration

and you should put style.webkitAnimationDuration for Chrome compatibility and so on for other browsers.

Answer 2

There is a bug reported the Aug 3, 2014 : link .

It was fixed and released the Feb 2, 2015 : Blink Revision 189311 .

PS : use chrome://version/ for know your blink version.