CSS动画，状态更改完成动画

我们正在开发的站点上实现一个愿望列表功能，当用户单击图标将当前项目添加到愿望列表时，它会触发一个ajax请求

现在，当ajax请求完成它的业务时，我们向图标添加了一个加载类，这样它就可以稍微放大和缩小。我的问题是，一旦ajax请求完成加载，我们就会删除该类，但是动画会突然停止，而不是缩小到初始大小

我们如何才能使动画完成，而不是突然停止

以下是我的CSS：

/**
 * Keyframes
 */
@keyframes breathe {

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}



/**
 * Icon
 */
.wishlist-icn {
    transition: all .3s ease;
}

    .wishlist-icn--isAdded {
        fill: #4B3814;
    }

    .wishlist-icn--isLoading {
        animation: breathe 2s ease-in-out 0s infinite normal both;
    }

tl；博士：试试申请吧

CSS动画完成后的正常行为是将样式重置为初始状态。我在这里看到的过程是，当您删除

--isLoading

类时，动画停止并将样式恢复到原始状态。只有在这之后，转换才会开始工作，并且由于样式已经重置，因此无需任何操作<代码>动画填充模式：在

中向前

。wishlist icn将阻止动画重置，因此转换将能够逐渐运行。为了确保您可以将

变换：缩放（1）

添加到

.wishlist icn

或

:not（.wishlist icn--isLoading）

中，以便变换知道要进行的操作。并不是说我在这个特殊的案例中测试过它，但它值得一试；P

$（'.start animation'）。在（'click'，function（）上{
$（'.wishlisticn'）.addClass（'wishlist-icn--isLoading'）；
});
$（'.stop animation'）。在（'click'，function（）上{
$（“.wishlist icn”）.bind（“mozAnimationIteration动画迭代webkitAnimationIteration”，函数（）{
$（this.removeClass（“愿望列表icn——isLoading”）；
});
});
/**
*关键帧
*/
@关键帧呼吸{
50% {
转换：比例（1.2）；
}
100% {
变换：比例（1）；
}
}
/**
*图标
*/
.愿望清单{
位置：相对位置；
显示：内联；
过渡：一切都很轻松；
字号：5em；
}
.愿望清单icn--已添加{
填充：#4B3814；
}
.wishlist icn—正在加载{
动画：吸气2秒，吸气2秒，呼气2秒，正常呼吸2秒；
动画填充模式：正向；
}
.wishlist icn—已加载{
变换：比例（1）；
}
}

启动动画
停止动画