/* 定义动画的关键帧 - 从下向上 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(0px);
  }

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

.fade-in-up {
  opacity: 0;
  transform: translateY(0px);
  animation-fill-mode: both;
  animation: none;
  /* 初始时不播放动画 */
}

/* 动画触发后的状态 */
.fade-in-up.active {
  /* animation: fadeInUp 1s ease forwards; */
  animation: fadeInUp 1.2s ease-out forwards;
}

/* 定义动画的关键帧 - 从左往右 */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(0);
  }

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

.fade-in-up-left {
  opacity: 0;
  transform: translateX(0px);
  animation-fill-mode: both;
  animation: none;
  /* 初始时不播放动画 */
}

/* 动画触发后的状态 */
.fade-in-up-left.active {
  /* animation: fadeInUp 1s ease forwards; */
  animation: fadeInLeft 1s ease-out forwards;
}

/* 定义动画的关键帧 - 从右往左 */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(0);
  }

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

.fade-in-up-right {
  opacity: 0;
  transform: translateX(0px);
  animation-fill-mode: both;
  animation: none;
  /* 初始时不播放动画 */
}

/* 动画触发后的状态 */
.fade-in-up-right.active {
  animation: fadeInRight 1s ease-out forwards;
}