如何在动画播放状态中使用计时功能答案

【问题标题】：How to use timing functions with animation-play-state如何在动画播放状态中使用计时功能
【发布时间】：2021-12-21 15:48:57
【问题描述】：

我有一个应该在悬停时停止的动画：

.animated {
    animation-duration: 19000ms;
    animation-play-state: running; /* switches to “paused” on hover via JS */
}

问题是：我不喜欢“突然”停止效果。我想使用ease-in-out 之类的东西来平稳启动/停止。有没有办法通过animation-play-state 实现这一目标？如果没有，我可以使用哪些替代方案？

【问题讨论】：

标签： css css-animations

【解决方案1】：

我认为没有这样的属性可以做到这一点。但是您可以考虑通过组合另一个动画来获得近似结果。这是一个例子：

注意：这些值 '550ms' 和 '30deg' 是手动调整的，也许有一个等式可以计算一个并确定另一个值。

function enter() {
    animated.style['animation-play-state'] = 'paused';
    animated.style.transition = 'rotate 550ms ease-out';
  animated.style.rotate = parseFloat(animated.style.rotate || '0') + 30 + 'deg';
}

function leave() {
    setTimeout(function() {
    animated.style['animation-play-state'] = 'running';
  }, 550);
    animated.style.transition = 'rotate 550ms ease-in';
  animated.style.rotate = parseFloat(animated.style.rotate || '0') + 30 + 'deg';
}

#animated {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  border: solid 100px;
  border-color: red blue;
  border-radius: 50%;
  animation: 4s spin infinite linear;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

&lt;div id="animated" onmouseenter="enter()" onmouseleave="leave()"/&gt;

【讨论】：