@keyframes resiconAni {

  0%,
  100% {
    opacity: 1;
    transform: scale(1.1);
  }

  50% {
    opacity: 1;
    transform: scale(0.9);
  }
}


@keyframes restextAni {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(0.8);
  }
}


@keyframes slideOut {
  from {
    transform: translate(0, 0);
    opacity: 1;
  }

  to {
    transform: translate(-100%, -100%);
    opacity: 0;
  }
}

@keyframes slideIn {
  from {
    transform: translate(100%, 100%);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes slideOutUpRight {
  from {
    transform: translate(0, 0);
    opacity: 1;
  }

  to {
    transform: translate(100%, -100%);
    opacity: 0;
  }
}

@keyframes slideInFromLeftTop {
  from {
    transform: translate(-100%, 100%);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}



@keyframes fadeIn {
  from {
    /* transform: translate(0, 0); */
    opacity: 0;
  }

  to {
    /* transform: translate(-100%, -100%); */
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}



@keyframes bgmRotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);

  }
}



/* 自定义延迟类 */
.animate__delay-01s {
  animation-delay: 0.3s;
}

.animate__delay-02s {
  animation-delay: .5s;
}

.animate__delay-03s {
  animation-delay: .7s;
}

.animate__delay-04s {
  animation-delay: .9s;
}

.animate__delay-05s {
  animation-delay: 2s;
}


@keyframes card {

  from {
    transform: rotateX(90deg);
  }

  to {
    transform: rotateX(0);
    opacity: 1;
  }
}

.cardAni {
  animation-name: card;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}


@keyframes people {

  from {
    transform: translateY(-10%);
  }

  to {
    transform: translateY(0);

    opacity: 1;
  }
}

.peopleAni {
  animation-name: people;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}


@keyframes girl {

  0% {
    transform: translateY(-10%);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


.girlAni {
  animation-name: girl;
  animation-duration: .8s;
  animation-fill-mode: forwards;
}