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声明，并且不需要它。

为什么这个动画没有开始

1 个答案: