html - 悬停在元素上后如何平滑地删除循环的 CSS 动画？（以 gif 为例）

Question

我有一个循环动画，当用户将鼠标悬停在一个元素上时应用（忽略语法，从我的 Tailwind 设置中提取）。

    'pulsing-right': {
       'from': {transform: 'translateX(0)'},
       'to': {transform: 'translateX(4px)'}
     },
     // this is it on the element
     animation: pulsing-right 0.3s alternate infinite

这是上面代码的交互。

注意离开元素时的“捕捉”效果。移除 CSS 动画后，是否有平滑过渡到起始位置的方法？

标签： htmlcsscss-animations