css - 在我的主要 css 动画之前添加淡入淡出

Question

我想在我的动画之前在 #loader 上添加一个带有 CSS 的淡入，但它不起作用。你可以在这里测试它:http://codepen.io/AntoinePlu/pen/yLvdi

知道为什么吗？

这是我的 HTML :

<div id="wrapper">
  <ul id="loader">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

这是我的 CSS :

body{background-color:#39414D;}

#wrapper {
  margin: 5% auto;
  display:block;
  width:300px;
}
#loader{
    margin: auto;
    width:100px;
    height:100px;
    list-style:none;
}

#loader li{
  background-color:#ffffff;
  width:8px;
  height:40px;
  float:left;
  margin-right:6px;
  border-radius: 8px;
  -webkit-animation: fadein 4s;
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


@-webkit-keyframes insights {
    0%{
        height: 10px;
     margin-top: 90px;
    }

    50%{
        height: 50px;
     margin-top: 50px;
    }
    100%{
        height: 10px;
     margin-top: 90px;
    }
}

#loader li:nth-child(1){
  -webkit-animation: insights 1s ease-in-out infinite -0.8s;
}
#loader li:nth-child(2){
  -webkit-animation: insights 1s ease-in-out infinite -0.6s;
}
#loader li:nth-child(3){
  -webkit-animation: insights 1s ease-in-out infinite -0.4s;
}
#loader li:nth-child(4){
  -webkit-animation: insights 1s ease-in-out infinite -0.2s;
}
#loader li:nth-child(5){
  -webkit-animation: insights 1s ease-in-out infinite 0;
}

感谢您的回答!

Answer 1

而不是 @-webkit-keyframes 'fadein' 和 @-webkit-keyframes 'insights' 写

@-webkit-keyframes fadein 和@-webkit-keyframes insights

语法错误，代码中不需要''

http://codepen.io/anon/pen/xjuyn