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

我也在Firefox上尝试了这个demo，它确实有效！

我无法弄清楚为什么这不适用于Chrome。

我的Chrome版本 35.0.1916.153（Build oficial 274914）m

Answer 1

我想我发现了你的错误。

在你的小提琴上，代码就像这样

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

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

style.mozAnimationDuration

并且您应该将style.webkitAnimationDuration用于Chrome兼容性，以此类推其他浏览器。

Answer 2

2014年8月3日报告了一个错误：link。

它已修复并于2015年2月2日发布：Blink Revision 189311。

PS：使用chrome：// version /来了解你的blink版本。

更改动画持续时间css3无法在Chrome中使用

2 个答案: