为什么这个动画不是开始

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进行声明，并且不使用它。