CSS动画在谷歌浏览器中不起作用，但可以在其他浏览器中使用

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

来源

2013-09-24 sixside

您没有使用'-webkit'前缀。例如，你不应该只设置'animation'属性，而应该设置'-webkit-animation'（你还应该使用其他前缀来获得更多浏览器）。你可以在这里看到不同浏览器需要的前缀：http://caniuse.com/#search=css3%20animation – Itay

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

来源

2013-09-24 03:03:17

CSS动画在谷歌浏览器中不起作用，但可以在其他浏览器中使用

回答

相关问题