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动画不起作用

回答

相关问题