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;}
}

出了点问题......＆＃34; n-child（2n）＆＃34;从左边开始出现，但是其他div不是从顶部开始，而是从它们的最终位置出现......它看起来像动画（＆＃34;来自margin-top＆＃34;）分解，动画 - 不透明和边框 - 半径动画仍然可以......

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

感谢。

UPD：https://jsfiddle.net/3z6tj/1/ - 与n-child（2n） UPD2：https://jsfiddle.net/3z6tj/3/ - 没有第n个孩子（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;}
}

带有nth-child（）的CSS动画

1 个答案: