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

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

有没有办法做到这一点

这是我的密码：

。闪烁{
动画持续时间：2秒；
/*这就是我想要改变的*/
动画名称：闪烁；
动画迭代次数：无限；
动画方向：交替；
动画计时功能：轻松进出；
}
@关键帧闪烁{
0% {
不透明度：1；
}
50% {
不透明度：1；
}
51% {
不透明度：0.1；
}
100% {
不透明度：0.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
    }
}

还是一样

.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-1s{
动画持续时间：1s；
}
.blink-2s{
动画持续时间：2秒；
}
.blink-3s{
动画持续时间：3s；
}
@关键帧闪烁{
0% {
不透明度：1；
}
50% {
不透明度：1；
}
51% {
不透明度：0.1；
}
100% {
不透明度：0.1
}
}

一秒钟
两秒钟
三秒

我想你可以优化你的css。现在，第二秒更好。@alirezasafian。当你发表评论时，我对它进行了优化：-）…非常感谢！如果你还不知道，我对这个有点陌生：p@intrepidspiff不要介意。。不客气。。祝好运：-）祝你有一个愉快的一天