CSS loading animation not running - css

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 created by #AshNolan_</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.