Почему эта анимация не начинается

Question

Я нашел прохладный загрузчик сетки 3x3 here. Но после того, как я скопирую и вставляю свойства CSS и HTML в свой документ, анимация не запускается.

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

Что я делаю не так или я что-то отсутствует?

Answer 1

Необходимо обратить внимание на префиксы поставщика. Вы объявляете ключевые кадры с -webkit-, но не назначает тот же путь на CSS animation:

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

Таким образом, может работать для -webkit- браузеров. Проверьте это Demo Fiddle.

Тогда вам может потребоваться объявление keyframes и animation со всеми префиксами поставщика и без него.