如何在不反转计时功能的情况下反转CSS动画？

Question

假如有如下关键帧规则：

@keyframes bounceIn {
 0% {transform:translateX(0);}
 60% {transform:translateX(18rem);}
 100% (transform:translateX(15rem);}   
}

然后将其添加到这样的元素中：

.myDiv {
 animation: bounceIn .5s ease;
 animation-direction: reverse;
}

然后计时功能也会反转。有没有办法避免计时功能反转，或者是否有一个计时功能可以轻松使用？

我对此很感兴趣，因为否则我将不得不编写 2 个 @keyframe 规则才能获得反向动画，但可以轻松地作为双向计时函数。

谢谢。

Answer 1

animation-iteration-count: 2;

或者

animation-iteration-count: infinite; 
animation-direction: alternate;

所以...

animation: bounceIn .5s ease infinite alternate;