带有 nth-child() 的 CSS 动画

Question

我想尝试不同的动画效果。 这个想法是 - 从顶部出现一些子 div，从左侧出现一些 (nth-child) ...

html

   <div class="test">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
</div>

css

.test{
   position:fixed;
   top:100px; 
   left:400px;
   border-radius:0%;
   width:800px;
   height:500px;
   display:inline-block;
   background-color:red;
   animation:mapp 5s ease;
   -webkit-animation:mapp 5s ease;
   -o-animation:mapp 5s ease;
   -moz-animation:mapp 5s ease;
   -ms-animation:mapp 5s ease;
}

.test div{
            position:relative;
            display:inline-block;
            margin:20px;

            border-radius:25%;
            width:90px;
            height:90px;
            background-color:black;
            opacity:1;

            animation:mapp2 6s ease;
            -webkit-animation:mapp2 6s ease;
            -o-animation:mapp2 6s ease;
            -moz-animation:mapp2 6s ease;
            -ms-animation:mapp2 6s ease;

   }

动画

@-webkit-keyframes mapp{from{border-radius:50%; width:50px; height:50px;}}
@-moz-keyframes mapp{from{border-radius:50%; width:50px; height:50px;}}
@-o-keyframes mapp{from{border-radius:50%; width:50px; height:50px;}}
@-ms-keyframes mapp{from{border-radius:50%; width:50px; height:50px;}}
@keyframes mapp{from{border-radius:50%; width:50px; height:50px;}}


@-webkit-keyframes mapp2{0%{opacity:0; border-radius:0px; margin-   top:-100px;}
                     90%{opacity:0;border-radius:0px; margin-top:-100px;}
 }
 @-moz-keyframes mapp2{0%{opacity:0;border-radius:0px; margin-top:-100px;}
                     90%{opacity:0;border-radius:0px; margin-top:-100px;}
 }
 @-o-keyframes mapp2{0%{opacity:0;border-radius:0px; margin-top:-100px;}
                     90%{opacity:0;border-radius:0px; margin-top:-100px;}
 }
 @-ms-keyframes mapp2{0%{opacity:0;border-radius:0px; margin-top:-100px;}
                     90%{opacity:0;border-radius:0px; margin-top:-100px;} 
 }
 @keyframes mapp2{0%{opacity:0;border-radius:0px; margin-top:-100px;}
                     90%{opacity:0;border-radius:0px; margin-top:-100px;}
 }

这部分效果很好，但是当我添加时

css

.test div:nth-child(2n){
animation:mapp3 5s ease;
-webkit-animation:mapp3 5s ease;
-o-animation:mapp3 5s ease;
-moz-animation:mapp3 5s ease;
-ms-animation:mapp3 5s ease;
}

和动画

@-webkit-keyframes mapp3{0%{opacity:0; border-radius:0px; margin-     left:-100px;}
                     90%{opacity:0;border-radius:0px; margin-left:-100px;}
}

出了点问题...“nth-child(2n)”开始从左侧出现，但其他 div 不是从顶部出现，而是从它们的最终位置出现...看起来像动画（“从边距- top") 崩溃了，animaion - opacity 和border-radius 动画还可以...

对不起我的英语，希望你能理解这个问题。

谢谢。

UPD：https://jsfiddle.net/3z6tj/1/ - 带有 nth-child(2n) UPD2：https://jsfiddle.net/3z6tj/3/ - 没有 nth-child(2n)

Answer 1

试试这段代码https://jsfiddle.net/3z6tj/4/

.test{
  position:fixed;
  top:100px; 
  left:50px;
  border-radius:0%;
  width:800px;
  height:500px;
  display:inline-block;
  background-color:red;
  animation:mapp 3s ease;
  -webkit-animation:mapp 3s ease;
  -o-animation:mapp 3s ease;
  -moz-animation:mapp 3s ease;
  -ms-animation:mapp 3s ease;
}

.test div{
  position:relative;
  display:inline-block;
  margin:20px;
  border-radius:25%;
  width:90px;
  height:90px;

  opacity:1;
  animation:mapp2 7s ease;
  -webkit-animation:mapp2 7s ease;
  -o-animation:mapp2 5s ease;
  -moz-animation:mapp2 5s ease;
  -ms-animation:mapp2 5s ease;
}

.test div:nth-child(even){
  animation:mapp3 8s ease;
  -webkit-animation:mapp3 8s ease;
  -o-animation:mapp3 7s ease;
  -moz-animation:mapp3 7s ease;
  -ms-animation:mapp3 7s ease;
  background-color:black;
}

.test div:nth-child(odd){
  background-color:yellow;
  position:relative;
  top:0px;
}
@-webkit-keyframes mapp3{0%{position:relative;opacity:0; border-radius:0px; margin-left:-100px;}
  90%{position:relative;opacity:0;border-radius:0px; margin-left:-100px;}
}

@-webkit-keyframes mapp{from{border-radius:50%; width:50px; height:50px;}}
@-moz-keyframes mapp{from{border-radius:50%; width:50px; height:50px;}}
@-o-keyframes mapp{from{border-radius:50%; width:50px; height:50px;}}
@-ms-keyframes mapp{from{border-radius:50%; width:50px; height:50px;}}
@keyframes mapp{from{border-radius:50%; width:50px; height:50px;}}


@-webkit-keyframes mapp2{0%{position:relative;opacity:0; border-radius:0px; margin-top:-100px;}
  90%{opacity:0;border-radius:0px; position:relative;top:-100px;}
}