Question

我正在开发一个项目，其中多个div都加载了一个小动画，但正如你可以看到的那样，它们会同时携带。不知道他们怎么一个接一个地延迟0.1秒？

由于

.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -o-transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.example {
    display: inline-block;
    width:48%;
    height:100px;
    background:orange;
    margin: 1% 1%;
}



<div class="animated fadeInUp example">Hello World</div>

Answer 1

你可以使用像下面这样的动画延迟属性来延迟动画。

 .animated:nth-child(1){
    -webkit-animation-delay: 0.1s;
}
.animated:nth-child(2){
    -webkit-animation-delay: 0.2s;
    background-color: red;
}
.animated:nth-child(3){
    -webkit-animation-delay: 0.3s;
    animation-delay: 1.5s;
}
.animated:nth-child(4){
    -webkit-animation-delay: 0.4s;
    animation-delay: 1.5s;
}
.animated:nth-child(5){
    -webkit-animation-delay: 0.5s;
    animation-delay: 1.5s;
}
.animated:nth-child(6){
    -webkit-animation-delay: 0.6s;
    animation-delay: 1.5s;
}

但是，如果你有动态的Div数，那就是很多CSS并且不适应。所以你javascript将延迟属性逐个添加到div。

具有相同类的多个div的CSS动画延迟

1 个答案: