Slowing an Animation Down Smoothly

Question

I have an animation of rapidly "breathing" (quickly scaling up and down) letters. My goal is to have that breathing smoothly slow down on hover, then slowly becoming faster again when the cursor leaves - right now, I am changing the animation-duration on hover, though this causes the animation to abruptly slow down, jumping to a different frame. Transitioning the animation-duration didn't work, "transition" hasn't gotten me anywhere for that fact. JavaScript solutions also welcome!

.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)} 

}

Does this answer your question? [Change Animation speed on hover](https://stackoverflow.com/questions/23635343/change-animation-speed-on-hover) — alexyorke, Dec 07 '19 at 19:29

score 1 · Answer 1 · answered Dec 13 '19 at 09:26

To understand why the frame skips are happening you can duplicate the animation, one with 1s the other with 4s animaton-duration, like: https://animationhoverslowdonwn--blackespresso.repl.co/showdelay.html

as soon as you hover the left "hello" (1s duration) it jumps to the same animation state as the right one with 4s duration. You can open chrome dev tools to see more details and play around:

to fix the jumping one solution would be to delay the animation onmouseover: https://animationhoverslowdonwn--blackespresso.repl.co/ or the full example: https://repl.it/@BlackEspresso/AnimationHoverSlowdonwn

basically it does:

<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>

Oh man, it works flawlessly. You have no idea how in-time this is, having my collective assessment in three days and had given up on fixing this - thank you so much for your efforts! — PatrickHutchinson, Dec 14 '19 at 15:24

Slowing an Animation Down Smoothly

1 Answers1