Making a keyframes restart on click

Question

I have bubbles that float up using keyframes, but they are buttons that I also want to disappear when clicked and then have it automatically restart at 0%. I have been calling onmousedown and onmouseup to do this but it doesn't seem to be working. Any ideas?

$(document).ready() {
  function Bubbles() {
    $(".bubble_cluster_one").css("opacity", "0");

  }

  function Bubbles2() {
    $("bubble_cluster_one").css("top": "400px", "opacity": "1");

  }
}

.bubble_cluster_one {
  position: absolute;
  margin: 0;
  padding: 0;
  -webkit-animation: bubble_cluster_one 8s infinite;
  left: 150px;
  z-index: +1;
}
.bubble_cluster_one input {
  width: 40px;
  height: 60px;
}
@-webkit-keyframes bubble_cluster_one {
  0% {
    top: 400px;
  }
  100% {
    top: -70px;
  }
}

<div class="bubble_cluster_one">
  <input type="image" src="bubbles_1.png" alt="button" onmousedown="Bubbles()" onmouseup="Bubbles2()">
</div>

Answer 1

There were a couple of problems in the snippet that was provided in question:

• jQuery libraries were not included.
• $(document).ready wrapper was written wrongly (it should be written as mentioned in Roamer-1888's answer and the event handlers should be directly attached via JS. This is actually the best practice instead of using inline attributes.

Other than those two the following are the things that you need to note regarding CSS animations:

• Once an infinite animation starts, it continues to be running until the time the animation is removed from the element. So, even though it was hidden using opacity: 0, the animation was running in the background.
• To restart a CSS animation, the only possible way is to remove the animation on the element and add it back again after a delay.

• The above cannot be done with mousedown and mouseup events because when the animation is removed (on mousedown) the element goes back to its original position and the chances are very high that your mouse pointer is no longer over the element. This means the mouseup event would not get fired because it fires only when the mouse is still over the element.

  From jQuery website: The mouseup event is sent to an element when the mouse pointer is over the element, and the mouse button is released.

• So the solution is to do the following:

  • Use a specific class for the animation properties alone, add this extra class to the element. This is not mandatory but makes it easier to add or remove the animation by just add/remove class methods.
  • Use the click event on the element, first remove the animation class, set opacity to 0 to hide the element and after a small delay (using setTimeout) add the animation class back to the element and set the opacity back to 1.

$(document).ready(function() {
  $(".bubble_cluster_one input").on('click', function() {
    $(".bubble_cluster_one").removeClass("animation");
    $(".bubble_cluster_one").css("opacity", "0");
    setTimeout(
      function() {
        $(".bubble_cluster_one").addClass("animation");
        $(".bubble_cluster_one").css("opacity", "1");
      }, 100);
  });
});

.bubble_cluster_one {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 150px;
  z-index: 1;
}
.animation {
  animation: bubble_cluster_one 8s infinite;
}
.bubble_cluster_one input {
  width: 40px;
  height: 60px;
}
@keyframes bubble_cluster_one {
  0% {
    top: 400px;
  }
  100% {
    top: -70px;
  }
}

<!-- prefix free library is only to avoid vendor prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bubble_cluster_one animation">
  <input type="image" src="bubbles_1.png" alt="button">
</div>

---

Just adding top: 400px on mouseup would not work because when a CSS animation is running, the animation takes full control over properties that are being used by it. Only rules that can override the animation are those which have !important. It is generally bad practice to use !important when it can be avoided and so I won't recommend that way of restarting an animation.

From Animations Spec: CSS Animations affect computed property values. During the execution of an animation, the computed value for a property is controlled by the animation. This overrides the value specified in the normal styling system. Animations override all normal rules, but are overriden by !important rules.