使用jQuery和CSS转换的脉动效果

Question

我正试图达到一种效果,当条件是我时,背景颜色会发出脉动.所以我有:

<div class="box">...</div>

.box {
    background-color: #fff;
    transition: background-color 0.5s ease-out;
}
.box.active {
    background-color: #ccc;
}

所以现在我想使用jQuery添加和删除该类几次以创建背景颜色脉动效果.就像是:

$('.box').addClass('active').delay(1000).removeClass('active').delay(1000).addClass('active');

理论上,这应该产生脉动效应,但事实并非如此.会发生什么是"活动"类被添加并且永远不会被删除或再次添加.这几乎就像第一个'removeClass'永远不会被触发.

我错过了什么,但不知道是什么.也许它与CSS转换时序有关,但它们应该相互独立,对吧？

谢谢你的任何想法.

Answer 1

延迟仅适用于动画,不能添加和删除类.此外,您可以使用CSS中的关键帧进行脉动:

@keyframes pulse { 
  50% { background-color: #ccc }
}

.box {
  animation: pulse .5s ease-out 2;
}