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);}
}
}
答
你不前,你的动画代码所需要的#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/
+0
*谢谢*!我不是他们为什么把它留在杂志里。 – LauraNMS
答
-
@keyframes loadAnim {}
不应被嵌入@-webkit-keyframes loadAnim {}
- 的
animation
性能不应有-
在前面其中。
首先,标准的性质没有'-'他们面前。其次,关键帧规则的嵌套结构是错误的。第三,你不应该在'@ -webkit-keyframes'之前添加像'#loading> *>'这样的选择器,因为它没有任何意义。修复所有这些代码应该可以工作。 – Harry