Html 为什么这个动画没有开始

我发现很酷的3x3网格加载程序。但是在我复制并粘贴CSS和HTML属性到我的文档中之后，动画就不会开始了

HTML

---

我做错了什么或遗漏了什么？

您需要注意供应商前缀。您可以使用

-webkit-

声明关键帧，但在css

动画上指定的方式不同：

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

div.cube6{
保证金：051px 0px 0px 102px；
动画：cube6.5s线性0无限；哪个浏览器不工作？你能给我举一个例子说明如何在一个立方体上执行吗？-我的意思是如何将这个分配给动画…它已经在fiddle I链接中对chrome起作用了。你只需要添加其他声明@user3219821@user3219821你给我的网站帮了我很多。谢谢您：）现在它工作得很好！谢谢！！！@user3219821您需要修改动画的结构您的声明语法错误请在Firefox中检查此工作…如果这有帮助，请不要忘记将其标记为最终答案
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;
    }
} 

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