我如何在第一次迭代（而不是第二次）时反转 CSS3 动画

Posted 2023-03-06

【中文标题】我如何在第一次迭代（而不是第二次）时反转 CSS3 动画

【英文标题】：How do i reverse a CSS3 animation on the first iteration (and not the second)

【发布时间】：2011-07-26 21:15:03

【问题描述】：

我已经设置了一个这样的 CSS3 动画：

@-webkit-keyframes slidein 
    from  -webkit-transform: translateX(100%); 
    to    -webkit-transform: translateX(0); 

如何在类定义上反转这个动画？

例如：

.slideinTransition 
    -webkit-animation-name: slidein;
    -webkit-animation-direction: alternate;

这将在第二次迭代时反转动画，我想在第一次迭代时直接反转它。

【问题讨论】：

感谢您发布此问题。自己也没有找到如何避免创建 slideOutTransition 的方法。如果我们可以添加另一个带有“-webkit-animation：reverse”之类的类来以另一种方式触发动画，我会很棒......

【参考方案1】：

不太确定你在说什么，但肯定会翻转 from 和 to 值会使其第一次向后运行。

【讨论】：

感谢您的回答，但这正是我想要避免的。在更复杂的动画上，我不想反向重写动画，而是想通过类定义中的简单命令来反转动画。

AFAIK 没有更好的方法来做到这一点。我已经阅读了 developer.apple.com/library/safari/#documentation/InternetWeb/… ，并没有看到任何特别有用的东西。也许提交一个 webkit 错误？

【参考方案2】：

-webkit-animation: slidein 2s ease-out -2s infinite alternate forwards;

只需让动画从 -[duration] 秒开始直接跳到第二个动画;)

【参考方案3】：

试试这个：

-webkit-animation-direction: alternate-reverse;