philomena/assets/css/elements/burger.css

#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);
  }
}