CSSのアニメーションが機能しない

私はwebdesignmagでチュートリアルを実装しようとしていますが、動作していないようです。「より良いUXのための面白い読み込みアニメーション」であるはずです。 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

まず、標準のプロパティが彼らの前に ' - 'を持っていません。第2に、キーフレーム規則の入れ子構造が間違っています。第三に、 '@ -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 {}はanimationプロパティが前に-を持つべきではありません@-webkit-keyframes loadAnim {}
内に埋め込むべきではありませんそのうちの。

https://jsfiddle.net/Lh2dyft9/

出典

2016-05-17 16:36:36 johnniebenson

CSSのアニメーションが機能しない

答えて

関連する問題