CSS3动画预加载器 - JSFiddle的Codepen无法正常工作

Question

我正在尝试使用我在codepen上找到的预加载器，但似乎当我在网站上使用代码时，事情无法按预期工作。

我想知道为什么会这样？

Codepen：http://codepen.io/anon/pen/EGudF

JSfiddle：http://jsfiddle.net/sLmraL69/

代码：

CSS

.load {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    /*change these sizes to fit into your project*/
    width:100px;
    height:100px;
}
.load hr {
    border:0;
    margin:0;
    width:40%;
    height:40%;
    position:absolute;
    border-;
    animation:spin 2s ease infinite
}

.load :first-child {
    background:#35A9DA;
    animation-delay:-1.5s
}
.load :nth-child(2) {
    background:#71D0C8;
    animation-delay:-1s
}
.load :nth-child(3) {
    background:#35A9DA;
    animation-delay:-0.5s
}
.load :last-child {
    background:#35A9DA
}

@keyframes spin{
  0%,100%{ transform:translate(0) }
      25%{ transform:translate(120%) }
      50%{ transform:translate(120%, 120%) }
      75%{ transform:translate(0, 120%) }
}

HTML

<div class="load">
  <hr/><hr/><hr/><hr/>
</div>

元素不会旋转，所有元素都堆叠在一起。不知道我在这里缺少什么因为它不依赖于任何js库。

如果我在动画和转换属性中添加-webkit前缀，那么事情就会非常奇怪。

谢谢！

Answer 1

您已将CodePen的CSS配置为前缀，这意味着在适用的情况下会自动为您插入供应商前缀（如-webkit-和-moz-）。

这意味着当您将代码复制到JSFiddle中时，您不再可以使用此设置，并且代码中不存在所需的前缀，您需要手动添加这些前缀。

在大多数情况下，您可以依靠Can I Use...来查明某些CSS属性是否需要供应商前缀。例如，如果我们查找transform，我们会看到IE9需要-ms-前缀，旧版本的Firefox需要-moz-前缀和较旧版本的Chrome以及其他基于Webkit的浏览器需要-webkit-前缀：

然后我们可以通过更改：

手动添加这些内容

transform:translate(-50%, -50%);

要：

-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

...并且为任何其他可能还需要这些前缀的属性执行此操作以使它们起作用。