CSS loading animation not running

Question

Sorry for the vague title, but essentially I copied some code from CodePen where it works flawlessly, but I can't get the exact same code to work in my project, or a jsFiddle I created.

Here's the relevant HTML:

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

And the CSS for webkit browsers:

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

Here's the CodePen which looks great.

I attempted to copy all the code into my project, and the elements are there, but absolutely nothing happens to them.

Here's a jsFiddle which shows the code not running. Please note that this code is only prefixed to work in Chrome and other webkit browsers.

My first thought was that it was a prefixing problem, but after removing all the warnings, still nothing happens to those loader-items.

Answer 1

Your code is missing -webkit- prefixes for @keyframes.

I've added vendor prefix for the rest of the browsers as well.

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>

Answer 2

That's not CSS. That's Sass, a language that compiles to CSS; while it doesn't add new styling capabilities (that's the browser's job), it does have a lot of language features that let you write simpler, cleaner, and less repetitive stylesheets. No browser can use Sass out of the gate; it has to be compiled to CSS first.

True as that is, I missed the point of the question. See the answer(s) above.