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

Posted 2023-03-06

【中文标题】更改动画持续时间 CSS3 在 Chrome 中不起作用

【英文标题】：Change animation duration CSS3 not working in Chrome

【发布时间】：2014-09-11 11:32:39

【问题描述】：

我有这个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 官方 274914) m

【问题讨论】：

它适用于我的 Chrome (24)。 Fiddle.

是的，它适用于旧版 Chrome。我用我的 JSFiddle 在这个站点上运行了一个测试：browserling.com。我应该将此作为错误报告给 Google Chrome 团队吗？

【参考方案1】：

我想我发现了你的错误。

在您的小提琴上，代码如下所示

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

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

style.mozAnimationDuration

你应该把 style.webkitAnimationDuration 用于 Chrome 兼容性等其他浏览器。

【参考方案2】：

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

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

PS : 使用 chrome://version/ 了解您的眨眼版本。