Question

我想在动画之前在#loader上添加一个带有CSS的FadeIn，但它不起作用。您可以在此处进行测试：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

错误的syntx，代码中不需要''

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

在我的主要css动画之前添加fadein

1 个答案: