css動畫不起作用

我只是試圖在webdesignmag中實現一個教程，但它似乎並沒有工作。它應該是「一個更好的用戶體驗的有趣的加載動畫。」我已經在Chrome 49.0.2623.87 m和Firefox 46.0.1上試過了。有沒有人看到這個錯誤？css動畫不起作用

HTML：

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="testcss2.css"></link> 
</head> 
<body> 
<section id="loading"> 
<div><span></span></div> 
</section> 
</body> 
</html>

CSS：

html, body,#loading { 
    display: block; 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

#loading > * { 
    position: relative; 
    display: block; 
    top: 25%; 
    width: 50%; 
    height: 50%; 
    margin: 0 auto 0 auto; 
    border: 5px solid red; 
} 

#loading > * { 
    -webkit-animation-name: loadAnim; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -animation-name: loadAnim; 
    -animation-duration: 2s; 
    -animation-iteration-count: infinite; 
} 

#loading > * > * { 
    display: block; 
    top: 25%; 
    width: 50%; 
    height: 50%; 
    margin: 0 auto 0 auto; 
    border: 5px solid gray; 
} 

#loading > * > * { 
    -webkit-animation-name: loadAnim; /* Chrome, Safari, Opera */ 
    -webkit-animation-duration: 4s; 
    -webkit-animation-iteration-count: infinite; 
    -animation-name: loadAnim; 
    -animation-duration: 4s; 
    -animation-iteration-count: infinite; 
} 

#loading > * > @-webkit-keyframes loadAnim { 
    from { 
     -webkit-transform: rotate(0deg); 
    } 
    to{ 
     -webkit-transform: rotate(360deg); 
    } 
    @keyframes loadAnim { 
     from { transform: rotate(0deg);} 
     to { transform: rotate(360deg);} 
    } 
}

來源

2016-05-17 LauraNMS

首先，標準的性質沒有'-'他們面前。其次，關鍵幀規則的嵌套結構是錯誤的。第三，你不應該在'@ -webkit-keyframes'之前添加像'#loading> *>'這樣的選擇器，因爲它沒有任何意義。修復所有這些代碼應該可以工作。 – Harry

你不前，你的動畫代碼所需要的#loading > * >。它更改爲這做的伎倆：

@-webkit-keyframes loadAnim { 
    from { 
     -webkit-transform: rotate(0deg); 
    } 
    to{ 
     -webkit-transform: rotate(360deg); 
    } 
} 

@keyframes loadAnim { 
    from { transform: rotate(0deg);} 
    to { transform: rotate(360deg);} 
}

看到這個小提琴作爲參考： https://jsfiddle.net/y8q3wdv9/

來源

2016-05-17 16:20:50 Keiwan

*謝謝*！我不是他們爲什麼把它留在雜誌裏。 – LauraNMS

@keyframes loadAnim {}不應被嵌入@-webkit-keyframes loadAnim {}
的animation性能不應有-在前面其中。

https://jsfiddle.net/Lh2dyft9/

來源

2016-05-17 16:36:36 johnniebenson

css動畫不起作用

回答

相關問題