@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes fadeInUpSmall {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUpSmall {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

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

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

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

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(50%, -100%, 0);
        transform: translate3d(50%, -100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes cloudFloat {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-3.2rem);
    opacity: 0.3;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes cloudFloatRight {
  0% {
    transform: translateX(3.3rem);
    opacity: 0.3;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(3.3rem);
    opacity: 0.3;
  }
}

@keyframes firework {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}


@keyframes cloudFloatRight1 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(4.5rem);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes flowerShake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(6deg);
  }
  75% {
    transform: rotate(-6deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes bigShake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(4deg);
  }
  75% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes xiangqingRotate {
    0% {
        transform: translateX(-50%) scale(0.6);
    }
    50% {
        transform: translateX(-50%) scale(1);
    }
    100% {
        transform: translateX(-50%) scale(0.6);
    }
}

@keyframes clipPathAnimation {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
        opacity: 0 !important;
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1 !important;
    }
}
@keyframes fourCloudFloatRight1 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  50% {
    transform: translate(-5rem, 5rem);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes rotateChe {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 来回走动 */
@keyframes walkBackAndForth {
  0% {
    transform: translateX(-1.2rem);
  }
  25% {
    transform: translateX(-5rem);
  }
  50% {
    transform: translateX(-1.2rem);
  }
  75% {
    transform: translateX(-5rem);
  }
  100% {
    transform: translateX(-1.2rem);
  }
}

@keyframes scaleWord {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes rotateHuasheng {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes opacityYun {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

@keyframes shakeBigBig {
 0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(8deg);
  }
  75% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes renShake {
  0% {
    /* transform: rotate(0deg); */
    scale: 0.1;
    opacity: 0;
  }
  100% {
    /* transform: rotate(0deg); */
    scale: 1;
    opacity: 1;
  }
}

@-webkit-keyframes renShake {
  0% {
    /* transform: rotate(0deg); */
    scale: 0.1;
    opacity: 0 !important;
  }
  100% {
    /* transform: rotate(0deg); */
    scale: 1;
    opacity: 1 !important;
  }
}

@keyframes cloudFloat1 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-1rem);
    opacity: 0.3;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes swing-top {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(8deg); }   /* 向右摆动 */
  40% { transform: rotate(-6deg); }  /* 向左摆动 */
  60% { transform: rotate(4deg); }
  80% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}