.page__content {
  position: relative;
  .page__bomb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: showOnce 1.15s steps(1) forwards;
  }
}

.input__list {
  .input__item {
    --delay: 0s;
    &.animate__prop {
      visibility: hidden;
      animation: show 0.6s linear forwards;
      animation-delay: var(--delay);
    }
  }
}

.char__list {
  position: relative;
  .char__item__box {
    .char__item {
      visibility: visible;
      &.char__item__hidden {
        visibility: hidden;
      }

      &.char__item__prop {
        animation: bomb 1s ease forwards;
      }
    }
  }
}

.char__list__animate {
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(-45deg, transparent 19%, rgba(#fffef5, 0.8) 37%, transparent 63%);
    background-size: 400% 100%;
    animation: polish 1.5s ease;
  }
}

@keyframes bomb {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  20% {
    transform: scale(1.5);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes show {
  0% {
    transform: scale(1);
    visibility: visible;
  }
  40% {
    transform: scale(1.5);
    visibility: visible;
  }
  100% {
    transform: scale(1);
    visibility: visible;
  }
}

@keyframes polish {
  0% {
    background-position: 100% 50%;
  }

  to {
    background-position: 0 50%;
  }
}

@keyframes showOnce {
  0% {
    background: url('https://xxl-1313840333.cos.ap-guangzhou.myqcloud.com/xuexiaole_clinet/normalMode/bomb.gif')
      right center / 50% no-repeat;
  }
  100% {
    background: unset;
  }
}
