.leftNavWrap{translate: none; rotate: none; scale: none; 
    top: 65px;
    animation: hideleftmenu 1s ease-in-out;
    transition: all .2s;
   
}
.trans{ animation: leftmenu 1s forwards;
    transition: all .2s;
  }

  @keyframes leftmenu {
    0% {
      transform: translateX( 0%)
    }
    100% {
      transform: translateX( -100%)
    }
  }
  @keyframes hideleftmenu {
   100% {
      transform: translateX( 0%)
    }
    0% {
      transform: translateX( -100%)
    }
  }
@media screen and (max-width: 768px) {

    .leftNavWrap{
        animation:  hideleftmenu 1s ease-in-out;
        transition: all .2s;
        transform: translateX(100%)
    }
    .trans{ animation: leftmenu 1s forwards;
        transition: all .2s;
        transform: translateX(0%)
      }
      @keyframes leftmenu {
        0% {
          transform: translateX(100%)
        }
        100% {
          transform: translateX(0%)
        }
      }
      @keyframes hideleftmenu {
      0% {
          transform: translateX( 0%)
        }
       100% {
          transform: translateX( 100%)
        }
      }
}