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>

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:

1. Remove the fadeInBottom animation on mouse leave (likely with jQuery.)
2. 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.)
3. 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!