Webkit 关键帧在 chrome 中不起作用答案

【问题标题】：Webkit keyframe not working in chromeWebkit 关键帧在 chrome 中不起作用
【发布时间】：2013-06-28 03:10:06
【问题描述】：

为什么我的关键帧动画 (http://jsfiddle.net/ZcFre/) 在 Chrome 中不起作用？

我的 CSS 是：

.circle1 {
    -webkit-animation: spinoffPulse 1s infinite linear;
}
@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    };
}

【问题讨论】：

欢迎来到 Stack Oveflow。此处推荐的做法是在问题中发布相关代码，不要完全依赖链接。由于这是您的第一篇文章，我已经为您完成了。但是您应该阅读常见问题解答！
我打算去，但是添加代码的 UI 真的很傻（每行必须输入 4 个空格）我没有时间在每行按空格 4 次。也许我做错了什么？
没有错，但不是简单的方法。见这里 [meta.stackexchange.com/a/139751/215241]

标签： css google-chrome webkit css-animations

【解决方案1】：

您在动画声明的最后一个花括号之后放置了一个分号。 Firefox 接受了它，但 Chrome 没有。

修复后，您的动画再次旋转：http://jsfiddle.net/ZcFre/1/

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }; <--Remove the semicolon
}

【讨论】：

非常感谢！我一定错过了那些。 Chrome 是否有我可以看到的错误日志？
@user2537644 否，但您可以使用csslint.net 检查您的 CSS 是否正常。它也可以作为命令行工具使用，也可以作为多个 IDE/构建脚本的插件使用。