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

Question

我有这个demo .当您点击 div 时，动画的持续时间必须改变，但它在 Chrome 上不起作用。

这是我的js代码:

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

这是我的 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);
    }
}

我也试过这个demo在 Firefox 上，它工作正常!

我不明白为什么这在 Chrome 上不起作用。

我的 Chrome 版本是 35.0.1916.153(Build oficial 274914)m

Answer 1

我想我发现了你的错误。

在你的 fiddle 上，代码是这样的

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

我认为您应该添加对所有浏览器的兼容性。你的错误在于:

style.mozAnimationDuration

并且您应该放置 style.webkitAnimationDuration 以实现 Chrome 兼容性等其他浏览器。