#burger.open { display: block !important; @mixin transform-n-animation slidein, 0.4s, translate(0, 0); } #burger.close { display: none; } /* content sliding open */ #container.open { @mixin transform-n-animation open, 0.4s, translate(210px, 0); } @keyframes open { 0.00% { transform: translate(0, 0); } 100% { transform: translate(210px, 0); } } /* content closing */ #container.close { animation: close 0.3s ease-in-out; } @keyframes close { 0.00% { transform: translate(210px, 0); } 100% { transform: translate(0, 0); } } @keyframes slidein { 0.00% { transform: translate(-200px, 0); } 100% { transform: translate(0, 0); } }