css - 平滑地放慢动画

Question

我有一个快速“呼吸”(快速放大和缩小)字母的动画。我的目标是让呼吸在悬停时平稳地减慢，然后在光标离开时再次慢慢变快 - 现在，我正在更改悬停时的动画持续时间，尽管这会导致动画突然减慢，跳到不同的框架。过渡动画持续时间没有用，“过渡”并没有让我得到这个事实。也欢迎 JavaScript 解决方案!

.r {

animation-name: breathe;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.8s;

}

.r:hover{

animation-duration: 4s;

} 


@keyframes breathe{

  0% {transform: scale(1)}
  50% {transform: scale(1.2)}
  100% {transform: scale(1)} 

}

Answer 1

要了解为什么会发生跳帧，您可以复制动画，一个动画持续时间为 1 秒，另一个动画持续时间为 4 秒，例如:https://animationhoverslowdonwn--blackespresso.repl.co/showdelay.html

一旦您将鼠标悬停在左侧的“hello”(持续时间为 1 秒)，它就会跳转到与右侧相同的动画状态，持续时间为 4 秒。您可以打开 chrome 开发工具以查看更多详细信息并进行操作:

修复跳跃的一个解决方案是在鼠标悬停时延迟动画: https://animationhoverslowdonwn--blackespresso.repl.co/或完整示例: https://repl.it/@BlackEspresso/AnimationHoverSlowdonwn

基本上是这样的:

<script>
var lastInterval = -1;
function delayAnimation(el){
  clearInterval(lastInterval);
  const style=getComputedStyle(el);
  var delay = parseFloat(style.animationDelay);
  const step = 0.01;
  lastInterval = setInterval(function (){
    delay += step;
    el.style.animationDelay = delay + "s";
  },12);
}
</script>
<div style="position:absolute;left:50px;top:50px;" onmouseover="delayAnimation(this)" onmouseout="clearInterval(lastInterval)" class="r">
      Hello
</div>