Why this animation is not starting

Question

I have found cool 3x3 grid loader here. But after I copy and paste the CSS and HTML properties into my document - the animation is not starting.

HTML

<div class="loading"> 
            <div class="cube cube1"></div> 
            <div class="cube cube2"></div> 
            <div class="cube cube3"></div> 
            <div class="cube cube4"></div> 
            <div class="cube cube5"></div> 
            <div class="cube cube6"></div> 
            <div class="cube cube7"></div> 
            <div class="cube cube8"></div> 
        </div> 

CSS

body{ 
background:#333; 
} 

div.loading{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -75px; 
    margin-left: -75px; 
    width: 153px; 
    height: 153px; 
} 

div.cube{ 
    position: absolute; 
    margin: -1px; 
    padding: 0px; 
    width: 50px; 
    height: 50px; 
    background: #222; 
    display: inline-block; 
} 

div.cube1 {
    margin: 000px 0px 0px 000px;
    animation: cube1 .5s linear 0 infinite;
}

div.cube2 {
    margin: 000px 0px 0px 051px;
    animation: cube2 .5s linear 0 infinite;
}

div.cube3 {
    margin: 000px 0px 0px 102px;
    animation: cube3 .5s linear 0 infinite;
} 

div.cube4 {
    margin: 051px 0px 0px 000px;
    animation: cube4 .5s linear 0 infinite;
} 

div.cube5 {
    margin: 051px 0px 0px 051px;
}

div.cube6 {
    margin: 051px 0px 0px 102px;
    animation: cube6 .5s linear 0 infinite;
} 

div.cube7 {
    margin: 102px 0px 0px 000px;
    animation: cube7 .5s linear 0 infinite;
} 

div.cube8 {
    margin: 102px 0px 0px 051px;
    animation: cube8 .5s linear 0 infinite;
} 

@-webkit-keyframes cube1 { 
    0%  {
        margin: 000px 0px 0px 000px;
    }
    25% {
        margin: 000px 0px 0px 000px;
    } 
    50% {
        margin: 000px 0px 0px 051px;
    } 
    75% {
        margin: 000px 0px 0px 051px;
    } 
    100% {
        margin: 000px 0px 0px 051px;
    }
}

@-webkit-keyframes cube2 { 
    0% {
        margin: 000px 0px 0px 051px;
    } 
    25% {
        margin: 000px 0px 0px 051px;
    } 
    50% {
        margin: 000px 0px 0px 102px;
    }
    75% {
        margin: 000px 0px 0px 102px;
    } 
    100% {
        margin: 000px 0px 0px 102px;
    }
}

@-webkit-keyframes cube3 { 
    0% {
        margin: 000px 0px 0px 102px;
    } 
    25% {
        margin: 051px 0px 0px 102px;
    }
    50% {
        margin: 051px 0px 0px 102px;
    }
    75% {
        margin: 051px 0px 0px 102px;
    } 
    100% {
        margin: 051px 0px 0px 102px;
    } 
}

@-webkit-keyframes cube4 {
    0% {
        margin: 051px 0px 0px 000px;
    }
    25% {
        margin: 051px 0px 0px 000px;
    } 
    50% {
        margin: 051px 0px 0px 000px;
    } 
    75% {
        margin: 000px 0px 0px 000px;
    }
    100% {
        margin: 000px 0px 0px 000px;
    }
}

@-webkit-keyframes cube6 { 
    0% {
        margin: 051px 0px 0px 102px;
    } 
    25% {
        margin: 102px 0px 0px 102px;
    } 
    50% {
        margin: 102px 0px 0px 102px;
    } 
    75% {
        margin: 102px 0px 0px 102px;
    } 
    100% {
        margin: 102px 0px 0px 051px;
    } 
} 

@-webkit-keyframes cube7 { 
    0% {
        margin: 102px 0px 0px 000px;
    } 
    25% {
        margin: 102px 0px 0px 000px;
    } 
    50% {
        margin: 102px 0px 0px 000px;
    } 
    75% {
        margin: 051px 0px 0px 000px;
    } 
    100% {
        margin: 051px 0px 0px 000px;
    } 
} 

@-webkit-keyframes cube8 { 
    0% {
        margin: 102px 0px 0px 051px;
    } 
    25% {
        margin: 102px 0px 0px 051px;
    } 
    50% {
        margin: 102px 0px 0px 051px;
    } 
    75% {
        margin: 102px 0px 0px 051px;
    } 
    100% {
        margin: 102px 0px 0px 000px;
    }
} 

What I am doing wrong or am I missing something?

Answer 1

You need to pay attention at the vendor prefixes. You declare the keyframes with -webkit- but doesn't assign the same way on the css animation:

div.cube6 {
  margin: 051px 0px 0px 102px;
  animation: cube6 .5s linear 0 infinite; <-- Needs webkit too
} 

That way can work for -webkit- browsers. Check this Demo Fiddle.

Then you may need to make keyframes and animation declaration with all vendor prefixes and without it.