Multiple CSS animations: How to avoid re-triggering one of them?

Question

I am trying to build an animated menu for mobile apps similar to Pinterest's radial menu. I have managed to get the behaviour to where I want it except for one minor detail: when the menu opens, the items shoot out as I want them to, and when you hover on them, they transform as I want them to. problem is, after the cursor leaves the items, they re-trigger their original animation, instead of just returning to their previous state. I realise this is a problem to do with the class being used for the animation and I have tried a number of solutions, including deleting the class and adding a new one .onmouseover() and changing animation running state on hover/mousover. I am probably missing something simple and idiotic, but I just cannot see it. can anybody help?

The following code is just the way I had it before trying to implement solutions.

HTML:

<!--Footer-->
<div class="footer">
  <!--RADIAL NAV MENU-->
  <div id="navContainer">
    <!--Buttons-->
    <div id="workouts" class="sml smlOne">Go there</div>
    <div id="home" class="sml smlTwo">Go here</div>
    <div id="profile" class="sml smlThree">Go somewhere</div>
    <!--Burger-->
    <div class="burger-menu">
      <div id="top" class="bar barTop"></div>
      <div id="middle" class="bar barMid"></div>
      <div id="bottom" class="bar barBot"></div>
    </div>
  </div>
</div>

CSS:

.footer
{
  position: fixed;
  bottom: 0%;
  width: 100%;
  height: 50px;
  background-color: #d36363;
  box-shadow: 0px -6px 6px #888888;
  z-index: +2;
}

/* Burger menu section */
#navContainer
{
  text-align: center;
  font-size: 10px;
}

.burger-menu
{
  position: relative;
  margin: auto;
  height: 100%;
  width: 50px;
}

.bar
{
  height: 6px;
  width: 100%;
  background-color: white;
}

#top
{
  position: relative;
  top: 5px;
}

#middle
{
  position: relative;
  top: 15px;
}

#bottom
{
  position: relative;
  top: 25px;
}

.barTop, .barMid, .barBot
{
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.barTopOn
{
  transform: rotate(45deg) translateY(12px) translateX(11px);
}

.barMidOn
{
  opacity: 0;
}

.barBotOn
{
  transform: rotate(-45deg) translateY(-12px) translateX(11px);
}

/* Navigation buttons section */
#navContainer
{
  position: relative;
  margin: auto;
  width: 50px;
}

.sml
{
  border: 2px solid #58a7dd;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: white;
  box-shadow: 6px 6px 6px #888888;
  transform: scale(0);
}

#workouts
{
  position: absolute;
  bottom: 10px;
  left: -60px;
}

#home
{
  position: absolute;
  bottom: 50px;
}

#profile
{
  position: absolute;
  bottom: 10px;
  left: 60px;
}

.smlOnOne
{
  animation: pop, slideOne 0.1s ease-in;
  animation-fill-mode: forwards;
}

.smlOnTwo
{
  animation: pop, slideTwo 0.1s ease-in;
  animation-fill-mode: forwards;
}

.smlOnThree
{
  animation: pop, slideThree 0.1s ease-in;
  animation-fill-mode: forwards;
}

.smlOnOne:hover
{
  background-color: red;
  border: none;
  box-shadow: 6px 10px 18px #686868;
  animation: whopL 0.2s;
  animation-fill-mode: forwards;
}

.smlOnTwo:hover
{
  background-color: red;
  border: none;
  box-shadow: 6px 10px 18px #686868;
  animation: whopC 0.2s;
  animation-fill-mode: forwards;
}

.smlOnThree:hover
{
  background-color: red;
  border: none;
  box-shadow: 6px 10px 18px #686868;
  animation: whopR 0.2s;
  animation-fill-mode: forwards;
}

@keyframes pop
{
  100%
  {
    transform: scale(1,1);
  }
}

@keyframes slideOne
{
  0%
  {
    bottom: -20px;
    left: 0px;
  }
  100%
  {
    bottom: 10px;
    left: -60px;
  }
}

@keyframes slideTwo
{
  0%
  {
    bottom: -20px;
  }
  100%
  {
    bottom: 50px;
  }
}

@keyframes slideThree
{
  0%
  {
    bottom: -20px;
    left: 0px;
  }
  100%
  {
    bottom: 10px;
    left: 60px;
  }
}

@keyframes whopL
{
  0%
  {
    transform: scale(1,1) translateY(0px) translateX(0px);
  }
  100%
  {
    transform: scale(1.5) translateY(-10px) translateX(-10px);
  }
}

@keyframes whopC
{
  0%
  {
    transform: scale(1,1) translateY(0px) translateX(0px);
  }
  100%
  {
    transform: scale(1.5) translateY(-10px);
  }
}

@keyframes whopR
{
  0%
  {
    transform: scale(1,1) translateY(0px) translateX(0px);
  }
  100%
  {
    transform: scale(1.5) translateY(-10px) translateX(10px);
  }
}

JS/jQuery:

$(".burger-menu").click(function()
{
  $(".barTop").toggleClass("barTopOn");
  $(".barMid").toggleClass("barMidOn");
  $(".barBot").toggleClass("barBotOn");
  $(".smlOne").toggleClass("smlOnOne");
  $(".smlTwo").toggleClass("smlOnTwo");
  $(".smlThree").toggleClass("smlOnThree");
  });

Here is a working demo: https://codepen.io/BGGrieco/pen/NgjxXq

Answer 1

You have an element that is a set of @-webkit-keyframes to animate in. On hamburger-menu click, these keyframes run, and that works well.

Next, you have a second set of @-webkit-keyframes on hover, so on hover works well too.

However, the instant the mouse is away from the element, the first (intro) set of keyframes gets run again. You don't want it to run after it first runs.

Here is what I was able to accomplish: https://codepen.io/CapySloth/pen/RgxKEb

<div id="workouts" class="sml smlOne">
  <div class="test1">
    <a href="">Go there</a>
  </div>
</div>

Instead of stacking classes which contain keyframe animations onto the one ".sml" class, I have split the task between two elements. ".sml" now acts as a wrapper which takes care of the "hamburger-menu open" animation and "test1 a" takes care of the "whop" animation.

If you can find a way to hide/show parents of the "test1 a/test2 a/test3 a" then you will have what you want.

Answer 2

You can use .stop() before your .toggleClass.

$("#example").stop().toggleClass("class");