<a id="togglemenu" onclick="document.body.classList.toggle('menuopen');">Menu<span><span></span><span></span><span></span></span></a>

<style>
@keyframes span1 {
    0%   { top: 0%; transform-origin: 50% 50%;}
    50%  { top: 50%; transform: rotate(0deg) translateY(-50%);}
    100% { top: 50%; transform: rotate(45deg) translateY(-50%);}
}
@keyframes span2 {
    0%   {opacity: 1;}
    45%  {opacity: 1;}
    65%  {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes span3 {
    0%   { bottom: 0%; transform-origin: 50% 50%;}
    45%  { bottom: 50%; transform: rotate(0deg) translateY(50%);}
    100% { bottom: 50%; transform: rotate(-45deg) translateY(50%);}
}

#togglemenu {display: none;}
@media only screen and (max-width: 55rem) {
    #menu {display: none;}
    .menuopen #menu {display: block;}
    #togglemenu {display: block; cursor: pointer;}
    
}
#togglemenu > span {display: inline-block; margin-left: 0.4rem; width: 1.1rem; height: 0.75rem; position: relative; vertical-align: middle; position: relative; bottom: 1px;}
#togglemenu > span > span {display: block; position: absolute; width: 100%; height: 2px; background: #999;}
#togglemenu > span > span:nth-child(1) {top: 0; transform-origin: 50% 0%;}
#togglemenu > span > span:nth-child(2) {top: 50%; margin-top: -1px;}
#togglemenu > span > span:nth-child(3) {bottom: 0; transform-origin: 50% 100%;}

.menuopen #togglemenu > span > span:nth-child(1) {
    animation: span1 0.25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.menuopen #togglemenu > span > span:nth-child(2) {
    animation: span2 0.25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;  
}
.menuopen #togglemenu > span > span:nth-child(3) {
    animation: span3 0.25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards; 
}
</style>