How to start a CSS Keyframe animation from a button press using JS?

So I am fairly new to coding, and completely new to js/JQuery and we have been tasked with creating a CSS Animation game, and I have an event where when I press the .buutton, I want it to start my .nuclear-icon animation sequence which uses sprite loading between two images. But my issue is, the .nuclear-icon is constantly flashing.

  .button {
    position: absolute; top: 110px; right: 355px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 96px;
    display: inline-block;
    border: 2px solid black;
    cursor: pointer;
    padding: 7px 28px;
    border-color: #000000;
    color: black;
  }

.nuclear-icon {
  width: 94px; height: 101px;
  background: url(img/intro_nuclear.png); background-repeat: no-repeat;
  position: absolute; top: 580px; left: 254px;
  animation: red-alert .5s steps(2) infinite;
}


@keyframes red-alert {
  0% { background-position: 94 101; opacity: 1;}
  100% { background-position: 94 202; opacity: 1;}
}

We have been taught the very basics of this stuff but I cannot seem to get it to work if anyone could help please? If I have worded this correctly. These are the three elements that are causing this issue, everything has been added in by css as that’s how we have been told to do it for this assignment.

I have tried adding a .AddEventListener to a ‘click’ but I really don’t understand it all that well. Any help would be greatly appreciated.