.transition-container{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  animation: transition-container .5s linear .5s both;
  visibility: hidden;
  overflow: hidden;
}

.transition-container-hide,
{
  visibility: hidden;
}

.transition-box {
  width: 100%;
  height: 100vh;
  animation: transition-box .5s linear .5s both;
  display: block;
  float: left:
}

.transition-box-hide{
  visibility: hidden;
  height: 0;
}

@keyframes transition-box {
  0% {
    width: 0;
    float: left;
    display: block;
    tra
  }
  50% {
    width: 100%;
    float: left;
    display: block;
  }
  65% {
    width: 100%;
    float: right;
    display: block;
  }
  90% {
    width: 50%;
    float: right;
    display: block;
  }
  100% {
    width: 0;
    float: right;
    display: none;
  }
}



.transition-sidebar{
  animation: transition-sidebar .5s linear both;

}

.transition-sidebar-hide{
  height: 0;
  visibility: hidden;
}

@keyframes transition-sidebar {
  0% {
    height: 0;
  }
  50% {
    height:100vh;
  }
  75% {
    height:100vh;
  }
  99% {
    height:100vh;
  }
  100% {
    height: 100vh;
  }
}


@keyframes transition-container {
  0% {
    visibility: visible;
  }
  50% {
    visibility: visible;
  }
  75% {
    visibility: visible;
  }
  99% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}