CSS animation forwards and then backwards - css

Question

I'm trying to create a CSS animation that when the user clicks the burger menu it transforms to an x (step 1), then when the user clicks it again it animates back to the burger menu (step 2).
Step 1 works but I don’t know how to reverse the animation.
Thanks for your help!
http://jsfiddle.net/aX6Cf/
HTML
<a id="mobile-menu">
<span></span>
</a>
CSS
#-webkit-keyframes rotate-plus {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(45deg);
}
}
#-webkit-keyframes rotate-minus {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(-45deg);
}
}
#-webkit-keyframes transition-1 {
from {
top: -6;
transition: all .2s ease-out;
}
to {
top: 0;
transition: all .2s ease-out;
}
}
#-webkit-keyframes transition-2 {
from {
bottom: -6;
transition: all .2s ease-out;
}
to {
bottom: 0;
transition: all .2s ease-out;
}
}
body {
margin: 20px;
}
#mobile-menu {
display: block;
position: relative;
cursor: pointer;
width: 30px;
padding: 6px 30px 9px 0;
box-sizing: border-box;
}
#mobile-menu span,
#mobile-menu span:before,
#mobile-menu span:after {
height: 3px;
width: 30px;
background: #000;
display: block;
content: "";
position: absolute;
left: 50%;
margin-left: -15px;
}
#mobile-menu span:before {
top: -6px;
}
#mobile-menu span:after {
bottom: -6px;
}
#mobile-menu.active span {
background-color: transparent;
}
#mobile-menu.active span:before {
-webkit-animation: rotate-plus .05s ease-out .1s forwards,
transition-1 .05s ease-out forwards;
animation: rotate-plus .05s ease-out .1s forwards,
transition-1 .05s ease-out forwards;
}
#mobile-menu.active span:after {
-webkit-animation: rotate-minus .05s ease-out .1s forwards,
transition-2 .05s ease-out forwards;
animation: rotate-minus .05s ease-out .1s forwards,
transition-2 .05s ease-out forwards;
}
jQuery
$("#mobile-menu").click(function(){
$("#mobile-menu").toggleClass("active");
});

Answer 1

I take back what I said in my comment above. Looks like it is possible to do this with plain CSS, after all... The trick is to use transition delays properly.
HTML
<a id="mobile-menu">
<span></span>
</a>
CSS
body {
margin: 20px;
}
#mobile-menu {
display: block;
position: relative;
cursor: pointer;
width: 30px;
padding: 6px 30px 9px 0;
box-sizing: border-box;
}
#mobile-menu span,
#mobile-menu span:before,
#mobile-menu span:after {
height: 3px;
width: 30px;
background: #000;
display: block;
content: "";
position: absolute;
left: 50%;
margin-left: -15px;
}
#mobile-menu span {
transition: background-color .3s ease .3s;
-webkit-transition: background-color .3s ease .3s;
}
#mobile-menu span:before {
top: -6px;
transition: top .2s ease .2s, transform .2s ease;
-webkit-transition: top .2s ease .2s, -webkit-transform .2s ease;
}
#mobile-menu span:after {
bottom: -6px;
transition: bottom .2s ease .2s, transform .2s ease;
-webkit-transition: bottom .2s ease .2s, -webkit-transform .2s ease;
}
#mobile-menu.active span {
background-color: transparent;
transition: background-color .3s ease;
-webkit-transition: background-color .3s ease;
}
#mobile-menu.active span:before {
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: top .2s ease .1s, transform .2s ease .3s;
-webkit-transition: top .2s ease .1s, -webkit-transform .2s ease .3s;
}
#mobile-menu.active span:after {
bottom: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
transition: bottom .2s ease .1s, transform .2s ease .3s;
-webkit-transition: bottom .2s ease .1s, -webkit-transform .2s ease .3s;
}
jQuery
$(function() {
$("#mobile-menu").click(function(){
$("#mobile-menu").toggleClass("active");
});
})
Online Demo

Answer 2

Check out this JSfiddle which I tweaked a little bit (to much your code) from the original one in this awesome Codepen.
HTML
<a id="mobile-menu" href="#">
<span></span>
</a>
CSS
a#mobile-menu {
display: inline-block;
width:30px;
height:18px;
cursor: pointer;
text-decoration: none;
}
a#mobile-menu span {
position: relative;
display: inline-block;
width: 30px;
height: 3px;
color:#252525;
font:bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent:-55px;
background: #252525;
transition:all .2s ease-out;
}
a#mobile-menu span::before, a#mobile-menu span::after {
content:'';
width: 30px;
height: 3px;
background: #252525;
position: absolute;
left:0;
transition:all .2s ease-out;
}
a#mobile-menu span::before {
top: -7px;
}
a#mobile-menu span::after {
bottom: -7px;
}
a#mobile-menu.active span {
background: #fff;
}
a#mobile-menu.active span::before {
top:0;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
a#mobile-menu.active span::after {
bottom:0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
a#mobile-menu {
position: absolute;
left:50%;
margin-left:-9px;
top:50%;
margin-top:-9px;
}
jQuery
$('a').click(function() {
$(this).toggleClass('active');
});
As I said all credit goes to this codepen