animate css3 forwords,CSS animation forwards and then backwards

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!

HTML

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");

});