遮罩层 背景透明度动画

.left-menus-pup {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  top: 188px;

  z-index: 300;

  animation-name: pup;

  /* 2、动画持续时间 */

  animation-duration: 0.1s;

  /* 3、动画执行速度 */

  animation-timing-function: linear;

  /* 7、动画结束时应用最后一帧 */

  animation-fill-mode: forwards;

}

@keyframes pup {

  0% {

    background-color: rgba(0, 0, 0, 0);

  }

  25% {

    background-color: rgba(0, 0, 0, 0.1);

  }

  50% {

    background-color: rgba(0, 0, 0, 0.3);

  }

  75% {

    background-color: rgba(0, 0, 0, 0.5);

  }

  100% {

    background-color: rgba(0, 0, 0, 0.7);

  }

}