CSS 加载动画未运行

Question

抱歉标题模糊，但本质上我从 CodePen 复制了一些代码，它可以完美地工作，但我无法在我的元素或我创建的 jsFiddle 中使用完全相同的代码。

这是相关的 HTML:

<div class="loader loader--flipDelay loader--3d">
  <span class="loader-item">1</span>
  ...
</div>

以及 webkit 浏览器的 CSS:

.loader-item {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-left: 2px;
  background-color: rgba(61, 92, 126, 0.7);
  color: rgba(61, 92, 126, 0.7);
  -webkit-animation-duration: 2000ms;
  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-animation-iteration-count: infinite;
}
.loader--flipDelay .loader-item {
  -webkit-animation-name: flipDelay;
}
@keyframes flipDelay {
  0% {
    transform: rotateX(0deg);
    transform-origin: 0 0 0;
    opacity: 1;
  }
  30% {
    transform: rotateX(90deg);
    transform-origin: 0 0 0;
    opacity: 0;
  }
  40% {
    transform-origin: 0 0 0;
  }
  60% {
    transform: rotateX(90deg);
    opacity: 0;
    transform-origin: 0 100% 0;
  }
  90% {
    transform: rotateX(0deg);
    opacity: 1;
    transform-origin: 0 100% 0;
  }
}

这是 CodePen看起来很棒。

我试图将所有代码复制到我的元素中，元素在那里，但绝对没有任何反应。

这是一个 jsFiddle这显示代码未运行。请注意，此代码只有前缀才能在 Chrome 和其他 webkit 浏览器中使用。

我的第一个想法是这是一个前缀问题，但是在删除所有警告之后，那些加载项仍然没有任何反应。

Answer 1

您的代码缺少 @keyframes 的 -webkit- 前缀。

我也为其他浏览器添加了供应商前缀。

Fiddle

body {
  font-family: 'PT Sans', sans-serif;
  text-align: center;
  background-color: #000;
  padding-top: 40px;
}
h1,
h2 {
  background-color: rgba(200, 200, 200, 0.2);
  padding: 20px;
  text-transform: uppercase;
  color: #fff;
}
h1 {
  font-size: 24px;
  margin-bottom: 40px;
}
h1 a {
  display: block;
  margin-top: 10px;
  text-transform: none;
  color: #aaa;
  font-size: 16px;
  text-decoration: none;
}
h2 {
  font-size: 16px;
  margin-bottom: 15%;
}
.loader {
  display: block;
  overflow: hidden;
  margin-bottom: 15%;
  font-size: 0;
}
.loader--3d {
  transform-style: preserve-3d;
  -webkit-perspective: 800px;
  perspective: 800px;
}
.loader--slideBoth {
  overflow: visible;
}
.loader-item {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-left: 2px;
  background-color: rgba(61, 92, 126, 0.7);
  color: rgba(61, 92, 126, 0.7);
  -webkit-animation-duration: 2000ms;
  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-animation-iteration-count: infinite;
  animation-duration: 2000ms;
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-iteration-count: infinite;
}
.loader-item:nth-child(1) {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}
.loader-item:nth-child(2) {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}
.loader-item:nth-child(3) {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
.loader-item:nth-child(4) {
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}
.loader-item:nth-child(5) {
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}
.loader-item:nth-child(6) {
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}
.loader--slowFlip .loader-item {
  -webkit-animation-name: slowFlip;
  animation-name: slowFlip;
}
.loader--flipHoz .loader-item {
  -webkit-animation-name: flipHoz;
  animation-name: flipHoz;
}
.loader--fade .loader-item {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  animation-name: fade;
}
.loader--slowFlip .loader-item:nth-child(1),
.loader--flipHoz .loader-item:nth-child(1) {
  -webkit-animation-delay: 150ms;
  animation-delay: 150ms;
}
.loader--slowFlip .loader-item:nth-child(2),
.loader--flipHoz .loader-item:nth-child(2) {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
.loader--slowFlip .loader-item:nth-child(3),
.loader--flipHoz .loader-item:nth-child(3) {
  -webkit-animation-delay: 450ms;
  animation-delay: 450ms;
}
.loader--slowFlip .loader-item:nth-child(4),
.loader--flipHoz .loader-item:nth-child(4) {
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}
.loader--slowFlip .loader-item:nth-child(5),
.loader--flipHoz .loader-item:nth-child(5) {
  -webkit-animation-delay: 750ms;
  animation-delay: 750ms;
}
.loader--slowFlip .loader-item:nth-child(6),
.loader--flipHoz .loader-item:nth-child(6) {
  -webkit-animation-delay: 900ms;
  animation-delay: 900ms;
}
.loader--flipDelay .loader-item {
  -webkit-animation-name: flipDelay;
  animation-name: flipDelay;
}
.loader--flipDelayDown .loader-item {
  -webkit-animation-name: flipDelay;
  -webkit-animation-direction: reverse;
  animation-name: flipDelay;
  animation-direction: reverse;
}
.loader--slideDown .loader-item,
.loader--slideUp .loader-item {
  -webkit-animation-name: slideDown;
  -webkit-animation-duration: 800ms;
  -webkit-animation-timing-function: linear;
  animation-name: slideDown;
  animation-duration: 800ms;
  animation-timing-function: linear;
}
.loader--slideDown .loader-item {
  transform-origin: top left;
}
.loader--slideUp .loader-item {
  transform-origin: bottom left;
}
.loader--slideBoth .loader-item {
  -webkit-animation-name: slideBoth;
  -webkit-animation-duration: 1000ms;
  transform-origin: bottom left;
  -webkit-animation-timing-function: linear;
  animation-name: slideBoth;
  animation-duration: 1000ms;
  animation-timing-function: linear;
}
/**********************************/

/* KEYFRAME ANIMATION DEFINITIONS */

/**********************************/

@-webkit-keyframes slowFlip {
  0% {
    transform: rotateX(0deg);
  }
  40% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}
@-webkit-keyframes flipHoz {
  0% {
    transform: rotateY(0deg);
  }
  40% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes flipDelay {
  0% {
    transform: rotateX(0deg);
    transform-origin: 0 0 0;
    opacity: 1;
  }
  30% {
    transform: rotateX(90deg);
    transform-origin: 0 0 0;
    opacity: 0;
  }
  40% {
    transform-origin: 0 0 0;
  }
  60% {
    transform: rotateX(90deg);
    opacity: 0;
    transform-origin: 0 100% 0;
  }
  90% {
    transform: rotateX(0deg);
    opacity: 1;
    transform-origin: 0 100% 0;
  }
}
@-webkit-keyframes slideDown {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(90deg);
  }
}
@-webkit-keyframes slideBoth {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
@keyframes slowFlip {
  0% {
    transform: rotateX(0deg);
  }
  40% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}
@keyframes flipHoz {
  0% {
    transform: rotateY(0deg);
  }
  40% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes flipDelay {
  0% {
    transform: rotateX(0deg);
    transform-origin: 0 0 0;
    opacity: 1;
  }
  30% {
    transform: rotateX(90deg);
    transform-origin: 0 0 0;
    opacity: 0;
  }
  40% {
    transform-origin: 0 0 0;
  }
  60% {
    transform: rotateX(90deg);
    opacity: 0;
    transform-origin: 0 100% 0;
  }
  90% {
    transform: rotateX(0deg);
    opacity: 1;
    transform-origin: 0 100% 0;
  }
}
@keyframes slideDown {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(90deg);
  }
}
@keyframes slideBoth {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

<h1>A collection of loaders using CSS 2D and 3D transforms <a href="https://twitter.com/AshNolan_" target="blank">created by @AshNolan_</a></h1>


<h2>Flip Delay Up</h2>

<div class="loader loader--flipDelay loader--3d"> <span class="loader-item">1</span>
  <span class="loader-item">2</span>
  <span class="loader-item">3</span>
  <span class="loader-item">4</span>
  <span class="loader-item">5</span>
  <span class="loader-item">6</span>

</div>