Question

我只是想在webdesignmag中实现一个教程，但它似乎没有起作用。它应该是“一个有趣的加载动画，以更好的用户体验。”我在Chrome 49.0.2623.87 m和Firefox 46.0.1中尝试过它。有人看到了这个错误吗？

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);}
    }
}

Answer 1

动画代码之前不需要#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/

Answer 2

.csv不应嵌入@keyframes loadAnim {}
@-webkit-keyframes loadAnim {}属性不应该在animation前面。

https://jsfiddle.net/Lh2dyft9/

CSS动画不起作用

2 个答案: