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動畫在谷歌瀏覽器中不起作用，但可以在其他瀏覽器中使用

回答

相關問題