CSS Animation 在 Google Chrome 中不起作用，但在其他浏览器中起作用答案

【问题标题】：CSS Animation doesn't work in Google Chrome but works in other browsersCSS Animation 在 Google Chrome 中不起作用，但在其他浏览器中起作用
【发布时间】：2013-09-29 02:47:53
【问题描述】：

如果您查看此示例 http://codepen.io/jezen/pen/CAHsk，您会看到动画在 Chrome (v29)（以及其他现代浏览器）中运行。我采用完全相同的 CSS 代码并将其保存到我的本地驱动器，并创建了一个非常简单的引用 CSS 文件的 HTML 页面。页面加载并应用了 CSS 样式，但动画没有在我的本地版本中运行。

HTML 文件就这么简单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Arcs</title>
    <link rel="stylesheet" type="text/css" href="arcs.css">
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

我引用的 arcs.css 文件是我上面链接到的源站点的精确复制/粘贴。

另一个有趣的信息。如果您使用相同的浏览器访问作者演示站点：http://jezenthomas.com/experiments/arcify/，动画运行得很好。但是如果您点击示例提供的“HAML”、“JS”或“CSS”选项卡，然后点击返回“结果”选项卡，您会看到动画不再运行。

【问题讨论】：

您没有使用-webkit- 前缀。例如，不只是设置animation 属性，您还应该设置-webkit-animation（对于更多浏览器，您还应该使用其他前缀）。您可以在此处查看不同浏览器所需的前缀：caniuse.com/#search=css3%20animation

标签： css animation

【解决方案1】：

您需要在 CSS 中的动画和转换标签中添加 -webkit- 前缀。目前 MS IE10 和 FF 支持无前缀转换。祝你好运，让我知道进展如何！ :)

【讨论】：