改变动画持续时间CSS3不工作在Chrome

Change animation duration CSS3 not working in Chrome

本文关键字：工作 Chrome CSS3 动画 持续时间 改变      更新时间：2023-09-26

我有这个演示。当你点击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上尝试了这个演示，它可以工作!

我不知道为什么这不能在Chrome上工作。

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

我想我发现你的错误了。

在您的小提琴上，代码看起来像这样

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

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

style.mozAnimationDuration

，你应该把style.webkitAnimationDuration Chrome兼容等其他浏览器

在2014年8月3日的链接中报告了一个bug。

已修复并发布了2015年2月2日:Blink Revision 189311。

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

相关文章：