javascript - 相同 CSS 动画的不同动画持续时间

Question

我试图让多个带有文本的 div 都使用相同的 CSS 动画(闪烁)，但它们应该以不同的速率闪烁。假设我希望第一个 div 每 2 秒闪烁一次，第二个 div 每 4 秒闪烁一次。

有什么办法可以做到这一点吗？

这是我的代码:

.blink {
  animation-duration: 2s;
  /*this is what i'm trying to change*/
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.1
  }
}

<div class="blink">hello</div>
<div class="blink">explosion</div>

Answer 1

通过使用 :first-child 和 :last-child 你可以控制它们每个的动画持续时间

.blink:first-child {
animation-duration: 0.5s; /*this is what i'm trying to change*/
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.blink:last-child {
animation-duration: 1s; /*this is what i'm trying to change*/
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    51% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.1
    }
}

Demo

或相同

.blink{
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.blink:first-child {
animation-duration: 0.5s; /*this is what i'm trying to change*/
}
.blink:last-child {
animation-duration: 1s; /*this is what i'm trying to change*/
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    51% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.1
    }
}

Demo

当你说(多个div)时，你可以使用 :nth-child(n) 作为div，例如

.blink:nth-child(1) {  // for first div
.blink:nth-child(2) {  // for second div
.... so on