在Chrome中使用CSS关键帧动画但不支持FF（或IE）

我有一些使用关键帧的CSS动画加载条。它在Chrome中很好用，但在FireFox中不起作用。我仔细检查过所有的前缀都是正确的，我尝试过更改单位和调整值，但似乎没有任何工作。在Chrome中使用CSS关键帧动画但不支持FF（或IE）

她是一个codepen链接：

，这里是我的顶嘴：

@-webkit-keyframes 'loadbars' { 
    0%{ 
     height: 10px; 
     margin-top: 25px; 
    } 
    50%{ 
     height:50px; 
     margin-top: 0px; 
    } 
    100%{ 
     height: 10px; 
     margin-top: 25px; 
    } 
} 
@-moz-keyframes 'loadbars' { 
    0%{ 
     height: 10px; 
     margin-top: 25px; 
    } 
    50%{ 
     height:50px; 
     margin-top: 0px; 
    } 
    100%{ 
     height: 10px; 
     margin-top: 25px; 
    } 
} 
@-o-keyframes 'loadbars' { 
    0%{ 
     height: 10px; 
     margin-top: 25px; 
    } 
    50%{ 
     height:50px; 
     margin-top: 0px; 
    } 
    100%{ 
     height: 10px; 
     margin-top: 25px; 
    } 
} 
@keyframes 'loadbars' { 
    0%{ 
     height: 10px; 
     margin-top: 25px; 
    } 
    50%{ 
     height:50px; 
     margin-top: 0px; 
    } 
    100%{ 
     height: 10px; 
     margin-top: 25px; 
    } 
} 
@-webkit-keyframes 'loadbars' { 
    0%{ 
     height: 10px; 
     margin-top: 25px; 
    } 
    50%{ 
     height:50px; 
     margin-top: 0px; 
    } 
    100%{ 
     height: 10px; 
     margin-top: 25px; 
    } 
} 

#loading{ 
    position: fixed; 
    top: 36%; 

    .loader{ 
     z-index: 3; 
     margin: 0 auto; 
     left: 0; 
     right: 0; 
     top: 50%; 
     width: 60px; 
     height: 60px; 
     list-style: none; 

     li{ 
      background-color: #FFFFFF; 
      width: 10px; 
      height: 10px; 
      float: right; 
      margin-right: 5px; 
      box-shadow: 2px 4px 10px 0px rgba(0, 0, 0, 0.2); 
     } 

     li:first-child{ 
      -webkit-animation: loadbars 0.6s cubic-bezier(0.645,0.045,0.355,1) infinite 0s; 
       -moz-animation: loadbars 0.6s cubic-bezier(0.645,0.045,0.355,1) infinite 0s; 
       -o-animation: loadbars 0.6s cubic-bezier(0.645,0.045,0.355,1) infinite 0s; 
        animation: loadbars 0.6s cubic-bezier(0.645,0.045,0.355,1) infinite 0s; 
     } 

     li:nth-child(2){ 
      -webkit-animation: loadbars 0.6s ease-in-out infinite -0.2s; 
       -moz-animation: loadbars 0.6s ease-in-out infinite -0.2s; 
       -o-animation: loadbars 0.6s ease-in-out infinite -0.2s; 
        animation: loadbars 0.6s ease-in-out infinite -0.2s; 
     } 

     li:nth-child(3){ 
      -webkit-animation: loadbars 0.6s ease-in-out infinite -0.4s; 
       -moz-animation: loadbars 0.6s ease-in-out infinite -0.4s; 
       -o-animation: loadbars 0.6s ease-in-out infinite -0.4s; 
        animation: loadbars 0.6s ease-in-out infinite -0.4s; 
     } 
    } 
}

，它作用于HTML：

<div id="loading"> 
    <ul class="loader"> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
</div>

我可以恢复使用gif，但如果它可以正确渲染，这将会非常酷。

感谢

来源

2014-11-24 aviemet

因为你有引号（''）周围loadbars。删除它们，它会起作用。

更新codepen

来源

2014-11-24 03:24:31

哇靠，我现在踢自己一脚。 – aviemet 2014-11-24 03:41:05

在Chrome中使用CSS关键帧动画但不支持FF（或IE）

回答

相关问题