0

如果您查看此示例http://codepen.io/jezen/pen/CAHsk，您将看到动画在 Chrome (v29)（以及其他现代浏览器）中运行。我采用完全相同的 CSS 代码并将其保存到本地驱动器，并创建了一个非常简单的 HTML 页面，该页面引用了 CSS 文件。页面加载并应用了 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”选项卡，然后单击返回“结果”选项卡，您会看到动画不再运行。

4

1 回答 1

1

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

于 2013-09-24T03:03:17.477 回答