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

Different animation durations for the same CSS animation

本文关键字：动画 持续时间 CSS 相同      更新时间：2023-09-26

我试图让多个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>

通过使用：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
    }
}

演示

或相同的

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

演示

当您说（多个div）时，您可以使用：nth-child（n）来进行类似的div

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

一种方法是将持续时间拆分为自己的类，并在HTML中使用多个类（以.blink为主类）：

.blink {
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.blink-1s {
  animation-duration: 1s;
}
.blink-2s {
  animation-duration: 2s;
}
.blink-3s {
  animation-duration: 3s;
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    51% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.1
    }
}
<div class="blink blink-1s">one second</div>
<div class="blink blink-2s">two seconds</div>
<div class="blink blink-3s">three seconds</div>

相关文章：