如何在不反转计时功能的情况下反转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;

Answer 2

reverse是防止代码重复的必不可少的工具，但是，由于计时功能的行为有所不同，因此它的作用远不及它。

解决方案是找到一种与原始计时函数相反的计时函数

.myDiv {  
    animation: bounceIn .5s inverse(ease) reverse;
}

当然没有inverse(ease)这样的构造，但是所有计时函数都是三次方贝塞尔函数，我们需要另一个三次方贝塞尔函数，当反向解释时，它们的行为将与原始类似。 内置计时功能的定义可以在W3C spec

中找到

例如ease是cubic-bezier(0.25, 0.1, 0.25, 1)。

表示为cubic-bezier(A, B, C, D)。

ease的倒数将是一个cubic-bezier(1-C, 1-D, 1-A, 1-B)，它变成cubic-bezier(0.75, 0, 0.75, 0.9)

在您的代码中使用它

.myDiv {  
    animation: bounceIn .5s cubic-bezier(.75, 0, .75, .9) reverse;
}

有趣的是，ease-in-out的倒数使您拥有相同的ease-in-out，因此，如果您希望定时函数在反向解释时的行为完全相同，请使用该函数。