如何在不使用50%检查点的情况下反转CSS动画

我花时间编写包含反转效果的动画，50%的检查点如下：

element:hover {
animation: XXXX 0.5s ease-in-out 0s 1;
@keyframes XXXX {
    from {
        letter-spacing: 0.1rem;
    }
    50% {
      letter-spacing: 0.5rem;
    }
    to {
      letter-spacing: 0.1rem;
    }
}

我认为这并不优雅，我希望能够使用css属性来声明反向效果。例如：

element:hover {
animation: XXX 0.5s ease-in-out 0s 1 reverse;
@keyframes XXX {
    from {
        letter-spacing: 0.1rem;
    }
    to {
        letter-spacing: 0.5rem;
    }
}

---

我已经找到了解决办法，但什么也没找到。您有更清晰/最漂亮的解决方案吗？

您可以使用

备选方案，并且只定义两个迭代：


.box:悬停{
动画：XXX 0.5s缓进缓出交替；
动画迭代次数：2次；
}
@关键帧XXX{
从{
字母间距：0.1rem；
}
到{
字母间距：0.5雷姆；
}
}
这里的一些文本
您要查找的可能是
动画方向：交替反转：

动画在每个循环中反转方向，第一次迭代向后播放

见：


@关键帧XXX{
从{
字母间距：0.5雷姆；
}
到{
字母间距：0.1rem；
}
}
.box:悬停{
动画：XXX 0.5s缓进输出0s 2交替反转；
}
此处的一些文本
您可能会注意到您还原了初始动画。。。因此，在最后，我们只需要像我在回答中所建议的那样使用替代方案，我们保留初始值animation@TemaniAfif是的，
alternate
和
alternate reverse
之间的差异仅在两次以上的迭代中可见，并且基于动画的符号顺序。否，您将拥有完全相同的动画：）。。。您已还原动画，因此初始动画上的“交替”与还原动画上的“交替反转”相同。请注意：谢谢您的建议！