/* 定义渐变消失的动画 */
@keyframes fadeOut {
    0% {
      opacity: 1;
    }
    99% {
      opacity: 0;
    }
    100% {
      display: none;
      opacity: 0;
    }
  }
  
  /* 定义渐变出现的动画 */
  @keyframes fadeIn {
    0% {
      display: block;
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  /* 遮罩的基本样式 */
  .lp-shade {
    /* ...您已有的样式... */
    transition: opacity 0.5s; /* 设置透明度变化的过渡效果 */
  }
  
  /* 应用动画的类 */
  .fade-out {
    animation: fadeOut 0.3s forwards; /* 前向填充模式 */
  }
  
  .fade-in {
    animation-delay: 1s; 
    animation: fadeIn 0.3s forwards; /* 前向填充模式 */
  }
  
  @keyframes menufadeIn {
    from {
      display: block;
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes menufadeout {
    0% {
      opacity:1;
    }
    99% {
      opacity:0;
    }
    100% {
        
    }
  }
  @keyframes menuformatfadein {
    form {
        top:-100vh;
    }
    to {
        top:0vh;
    }    
  }
  @keyframes nav-animation {
    from {
      
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .menufade-in {
    animation: menufadeIn 0.3s forwards;
  }
  .menuformatfadein {
    animation: menuformatfadein 1s forwards;
  }
  .menufade-out {
    animation: menufadeout 0.3s forwards;
  }
  .nav-animation {
    animation: nav-animation 0.7s forwards;
  }