Pause CSS animation and change the animated property on hover - but don't restart another animation on mouse leave

Question

I have a button that has 2 animations: a one-time fadeInBottom (on page load) and an infinite pulsing box-shadow. On hover, I want to pause the pulse and make the box-shadow stronger.

On first glance, I thought this would be easy. On the :hover pseudo-class, set animation-play-state: paused and then set a new box-shadow. That doesn't work, I guess because CSS doesn't let you directly change properties that are also being adjusted in animations.

.button {
   animation: fadeInBottom 1s, fadeInOutShadow ease-in-out 1.2s alternate infinite;
   &:hover {
      animation-play-state: paused;
      box-shadow: 0 0 35px rgba(255, 215, 0, 0.9);
   }
}

@keyframes fadeInBottom {
      0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
                transform: translateY(10px);
      }
      100% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
      }
    }

@keyframes fadeInOutShadow {
  0% {
    -webkit-box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
  }
}

Ok, try #2. I checked a few questions on here and found one idea - use :hover {animation:0} to kill the animation, then set box-shadow. Stop animation and start transition on hover It's almost OK, but this doesn't work because of my fadeInBottom animation: every time I mouse leave the button, the fadeInBottom animation runs again.

.button {
   animation: fadeInBottom 1s, fadeInOutShadow ease-in-out 1.2s alternate infinite;
   &:hover {
      animation: 0;
      box-shadow: 0 0 35px rgba(255, 215, 0, 0.9);
   }
}

I have three potential options (I think) to continue:

Remove the fadeInBottom animation on mouse leave (likely with jQuery.)
Only run the fadeInBottom animation once, on page load, and ignore :hover and mouse leave events. Is there a CSS way? jQuery? (Don't know if this is possible.)
Is there actually a simple property attribute I don't know about that can accomplish 1 or 2?

Any recommendations on which of these would be best? First-time question asker here. Thanks!

Just added! The second code box uses the same @keyframes as the first. — ezeYaniv, Jan 07 '21 at 23:22
have you tried to use a delayed function to add the css animation separated? i mean you can make a function onload to set css fadein animation, which runs once, and after a delay use the other animation boxshadow, with hover pseudo so the shadow will remains without the fadein animation. give it a try ;) — Burham B. Soliman, Jan 07 '21 at 23:58

Burham B. Soliman · Accepted Answer · 2021-01-08T01:07:56.097

ok as long as you didn't replied yet, here is your solution, i hope it meets your code aims, regards,

$(document).ready(function(){
        $(".button").css("animation", "fadeInBottom 1s");

    setTimeout(function(){
        $(".button").css("animation", "fadeInOutShadow ease-in-out 1.2s alternate infinite");
    }, 1200);
    });
            $(".button").hover(function(){
            $(".button").css({"animation": "0", "box-shadow": "0 0 35px rgba(250, 215, 0, 0.9)"});
            }, function(){
                $(".button").css({"box-shadow": "", "animation": "fadeInOutShadow ease-in-out 1.2s alternate infinite"});
                });

.button {

    &:hover {
        box-shadow: 0 0 35px rgba(255, 215, 0, 0.9);
    }
}


@keyframes fadeInBottom {
      0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
                transform: translateY(10px);
      }
      100% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
      }
    }

@keyframes fadeInOutShadow {
  0% {
    -webkit-box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="button">Button</button>

Oh interesting idea! So to make sure I understand: with .ready, you set the animation to fadeInBottom on page load. Then you use setTimeout to overwrite the CSS animation property with the box-shadow animation after some time. Then you use .hover, which takes two arguments - mouseenter and mouseleave. Mouseenter function kills the animation and sets a fixed box-shadow, mouseleave function sets the animation back to the fadeInOut. Did I get it? — ezeYaniv, Jan 08 '21 at 23:48
exactly, so you can run the fade-in for one time only on load while the fading box-shadow will remains — Burham B. Soliman, Jan 08 '21 at 23:57

Pause CSS animation and change the animated property on hover - but don't restart another animation on mouse leave

1 Answers1