Question

如果您查看此示例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”选项卡，然后单击“结果”选项卡，您将看到动画不再运行。

Answer 1

您需要在动画中添加-webkit-前缀并转换css中的标签。目前，MS IE10和FF支持无前缀变换。祝你好运，让我知道它是怎么回事！：）

CSS动画在Google Chrome中不起作用，但适用于其他浏览器

1 个答案: