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

Kanstantsin Arlouski · Accepted Answer · 2017-06-28 18:17:25Z

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.

edited Jun 28, 2017 at 18:17

answered Jun 28, 2017 at 14:30

Kanstantsin Arlouski

7406 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brian Over a year ago

Indeed! Will see if I can fix that tomorrow. Will let you know, thank you!

Brian Over a year ago

@ Kanstantsin Arlouski, that worked great! Of course the clever way was to just child the extra animations to other divs, I feel stupid. Thank you for your help, you can see my final code in the Codepen.io link (codepen.io/BGGrieco/pen/NgjxXq).

Kanstantsin Arlouski Over a year ago

Way to go figuring it out all the way! Really glad I could help!

Tschallacka · Accepted Answer · 2017-06-28 14:38:45Z

0

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

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

edited Jun 28, 2017 at 14:38

Tschallacka

28.9k15 gold badges99 silver badges140 bronze badges

answered Jun 28, 2017 at 14:08

UghThatGUyAgain

15114 bronze badges

1 Comment

Brian Over a year ago

Thank you for your answer but it does not seem to work.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related