Revert animation on exit - css

Question

I am making a menu that should have animated "hamburger" icon inside. At first, I used transform and it looked nice, but I decided to add some fancier animation ;-)
They loook like this:
#keyframes animateFirstBar {
0% {
transform: translate(-50%, -200%);
}
50% {
transform: translate(-50%, 0);
}
100% {
transform: translateX(-50%) rotate(-45deg);
}
}
#keyframes animateSecoundBar {
0%, 50% {
transform: translate(-50%, 0);
}
51%, 100% {
transform: translate(-50%, 0) scaleX(.01);
}
}
#keyframes animateThirdBar {
0% {
transform: translate(-50%, 200%);
}
50% {
transform: translate(-50%, 0);
}
100% {
transform: translateX(-50%) rotate(45deg);
}
}
And they are used like this:
.main-menu {
$mainMenu: &;
position: fixed;
width: 300px;
height: 100%;
top: 0;
left: 0;
background: #ccc;
transform: translateX(-100%);
transition: $time transform ease-in;
&--active {
transform: none;
#{$mainMenu}__toggle {
transform: none;
background: rgba(0, 0, 0, 0);
}
#{$mainMenu}__toggle-line {
&:nth-of-type(1) {
animation: $time animateFirstBar forwards;
}
&:nth-of-type(2) {
animation: $time animateSecoundBar forwards;
}
&:nth-of-type(3) {
animation: $time animateThirdBar forwards;
}
}
}
&__toggle {
width: $width;
height: $width - 1;
position: absolute;
right: 0;
transform: translateX(100%);
top: 0;
background: yellow;
border: 0;
outline: 0;
transition: $time transform ease-in, $time background linear;
transform-origin: bottom right;
}
&__toggle-line {
width: 60%;
height: $lineHeight;
display: block;
background: black;
position: absolute;
left: 50%;
transition: $time transform ease-in;
top: (50% - ($lineHeight/2));
&:nth-of-type(1) {
animation: none;
transform: translate(-50%, -200%);
}
&:nth-of-type(2) {
animation: none;
transform: translate(-50%, 0);
}
&:nth-of-type(3) {
animation: none;
transform: translate(-50%, 200%);
}
}
}
You can see the example here: http://codepen.io/tomekbuszewski/pen/jrzKKR?editors=0100
My problem is, I don't know how to revert the animation on "exit" (on removing the --active modificator). I don't want to write another animations or add another class that will be removed over time with JS.

Answer 1

Previously I have already implemented this hamburger button with transition and transform and I think it is satisfied what you want to archive. I haven't done it with your approach using animation. But please take a look at this snippet to see the idea.
function toggleMenu(x) {
x.classList.toggle("change");
}
/*
Orginal article - https://github.com/trungk18/Animated-Navigation-Menu-Icons-with-CSS3
*/
/*Menu container*/
.content {
max-width: 40em;
margin: 1em auto;
}
.icon-container {
float: left;
position: relative;
cursor: pointer;
margin: 0 5em 5em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.bar {
display: block;
width: 35px;
height: 5px;
background-color: #333;
margin: 6px auto;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
border-radius: 3px;
}
.change {
/*Rotate first bar*/
/*Fade out the second bar-*/
/*Reduce width the second bar-*/
/*Rotate last bar*/
}
.change.icon-5 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.change .bar-10 {
-webkit-transform: rotate(45deg) translate(8px, -3px) scaleX(0.7);
-moz-transform: rotate(45deg) translate(8px, -3px) scaleX(0.7);
-ms-transform: rotate(45deg) translate(8px, -3px) scaleX(0.7);
-o-transform: rotate(45deg) translate(8px, -3px) scaleX(0.7);
transform: rotate(45deg) translate(8px, -3px) scaleX(0.7);
}
.change .bar-12 {
-webkit-transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7);
-moz-transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7);
-ms-transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7);
-o-transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7);
transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7);
}
<section class="content">
<div class="icon-container icon-5" onclick="toggleMenu(this)">
<span class="bar bar-10"></span>
<span class="bar bar-11"></span>
<span class="bar bar-12"></span>
</div>
</section>
<!--Full pen: http://codepen.io/trungk18/pen/jrrXjz-->

Answer 2

I've managed to solve the problem. I had to add another class, trigger it with JS and write another set of animations that flowed in reverse.
Animations:
#keyframes animateFirstBar {
0% { transform: translate(-50%, $spacing * -100%); }
60% { transform: translate(-50%, 0); }
100% { transform: translateX(-50%) rotate(-#{$rotation}deg); }
}
#keyframes revertFirstBar {
100% { transform: translate(-50%, $spacing * -100%); }
60% { transform: translate(-50%, 0); }
0% { transform: translateX(-50%) rotate(-#{$rotation}deg); }
}
#keyframes animateSecoundBar {
0%, 60% { transform: translate(-50%, 0); }
61%, 100% { transform: translate(-50%, 0) scaleX(.01); }
}
#keyframes revertSecoundBar {
0%, 60% { transform: translate(-50%, 0) scaleX(.01); }
61%, 100% { transform: translate(-50%, 0); }
}
#keyframes animateThirdBar {
0% { transform: translate(-50%, $spacing * 100%); }
60% { transform: translate(-50%, 0); }
100% { transform: translateX(-50%) rotate(#{$rotation}deg); }
}
#keyframes revertThirdBar {
0% { transform: translateX(-50%) rotate(#{$rotation}deg); }
60% { transform: translate(-50%, 0); }
100% { transform: translate(-50%, $spacing * 100%); }
}
revert*Bar are going with one class, animate*Bar with another.