Overlay with CSS animations

overlay.scss

@media screen and (max-width: 480px) { 
  html {
/*
* Overlay effect
*
*/
  .overlay{
        position:fixed;
        width:100%;
        height:100%;
        top: 0;
        left: 0;
        background: rgba(#009ac9, 0.85);
        z-index: 9999;
        nav{
            position:relative;
            top: 30%;
            height:60%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%); 
          ul{
            position:relative;
          }
        }
        .close{
          width:30px;
          height:30px;
          position:absolute;
          right:10px;
          top:10px;
          overflow:hidden;
          border:none;
          background: gray image-url('cross.png') no-repeat center center;
          text-indent:200%;
          outline:none;
          color:transparent;
          z-index:100;
          border-radius: 50% 50%;
        }
      }
      .close {
        display: block;
      }
      
      .overlay-effect{
        opacity: 0;
        visibility: hidden;
        @include transition(opacity 0.5s, visibility 0s 0.5s);
        &.open{
          opacity:1;
          visibility:visible;
          @include transition(opacity 0.5s);
        }
        nav{
            -webkit-perspective: 1200px;
            perspective: 1200px;
            ul{
              opacity: 0.4;
              -webkit-transform: translateY(-25%) rotateX(35deg);
                      transform: translateY(-25%) rotateX(35deg);
              -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
                      transition: transform 0.5s, opacity 0.5s;
            }
          }
        }
      }
      
      .overlay-effect.open nav ul{
        opacity: 1;
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
      }
      
      .overlay-effect.close nav ul{
        -webkit-transform: translateY(25%) rotateX(-35deg);
                  transform: translateY(25%) rotateX(-35deg);
      }
}