How Can I Let My Hamburger Animation Reverse?

I can't get my animation to work smoothly. I've creating a burger icon, with three divs, like this:

Solution 1:

Your understanding of reverse isn't completely true.

The animation plays backwards each cycle. In other words, each time the animation cycles, the animation will reset to the end state and start over again. Animation steps are performed backwards, and timing functions are also reversed. For example, an ease-in timing function becomes ease-out.

In your case, the animation already ended so adding reverse will not trigger the animation again, it will simply switch the start and end state.

Here is a simplified example. On hover you will see that the animation will jump and not change direction smoothly because we reverse the whole animation and we don't move back the element from where it is. It's like looking at a mirror:

.box {
  width:50px;
  height:50px;
  background:red;
  animation:change 5s linear forwards;
}

@keyframes change {
  from {transform:translateX(0)}
  to {transform:translateX(300px)}
}

body:hover.box{
   animation-direction:reverse;
}

<divclass="box"></div>

When the animation is done, you can clearly notice how on hover we switch first and last state.

---

Here is an easier way to do this using transition instead of animation where you will need less of code.

I used hover but you can easily replace with a class that you add/remove

.menu {
  height:50px;
  width:60px;
  position:relative;
  margin:50px;
  background:
    linear-gradient(#000,#000) center/100%10px no-repeat;
  transition:all 0s0.5s;
}
.menu:before,
.menu:after{
  content:"";
  position:absolute;
  left:0;
  height:10px;
  width:100%;
  background:#000;
  transition:0.5s0.5s top,0.5s0.5s bottom,0.5s transform;
}
.menu:before {
  top:0;
}
.menu:after {
  bottom:0;
}

.menu:hover {
  background-size:0px0px;
}

.menu:hover:before {
  top:calc(50% - 5px);
  transform:rotate(45deg);
  transition:0.5s top,0.5s0.5s transform;
}

.menu:hover:after {
  bottom:calc(50% - 5px);
  transform:rotate(-45deg);
  transition:0.5s bottom,0.5s0.5s transform;
}

<divclass="menu"></div>

Solution 2:

Working fiddle: https://jsfiddle.net/upnhcw69/38/

To solve that we need to have 2 animations and change them one with another, then they are trigegred correctly.

After first click firstChild animation is triggered after second click firstChild2 animation is triggered. We are using 2 classes with different animations.

.line{
   height: 10px;
   width: 100px;
   margin: 10px;
   background-color:red;
}

@keyframes firstChild {
  0% {transform: translateY(0);}
  50% {transform: translateY(10px);}
  100% {transform: rotate(-45deg);}
}

@keyframes firstChild2 {
  0% {transform: rotate(-45deg);}
  50% {transform: translateY(10px);}
  100% {transform: rotate(0deg);}
}

.animate {
   animation-name: firstChild;
   transform-origin: 30px25px;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
}

.reverse {
    animation-name: firstChild2;
   transform-origin: 30px25px;
   animation-duration: 0.5s;
}

Share