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

Question

我花时间写了一个包含相反效果的动画，有一个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;
    }
}

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

Answer 1

您可以使用alternate并只定义两个迭代：

​

.box:hover {
  animation: XXX 0.5s ease-in-out alternate;
  animation-iteration-count: 2;
}

@keyframes XXX {
  from {
    letter-spacing: 0.1rem;
  }
  to {
    letter-spacing: 0.5rem;
  }
}

<div class="box">Some text here</div>

​

Answer 2

你要找的可能是animation-direction: alternate-reverse;

动画每一个周期都会反转方向，第一次迭代是向后播放的。

请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

​

@keyframes XXX {
  from {
    letter-spacing: 0.5rem;
  }
  to {
    letter-spacing: 0.1rem;
  }
}

.box:hover {
  animation: XXX 0.5s ease-in-out 0s 2 alternate-reverse;
}

<div class="box">Some text here</div>

​