/* 动画效果库 */

/* 基础动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.3);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-200deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes tada {
    0% {
        transform: scale(1);
    }
    10%, 20% {
        transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}

@keyframes wobble {
    0% {
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        transform: translateX(20%) rotate(3deg);
    }
    45% {
        transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        transform: translateX(10%) rotate(2deg);
    }
    75% {
        transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes jello {
    11.1% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }
    22.2% {
        transform: skewX(6.25deg) skewY(6.25deg);
    }
    33.3% {
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }
    44.4% {
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }
    55.5% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }
    66.6% {
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }
    77.7% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
    88.8% {
        transform: skewX(0.09765625deg) skewY(0.09765625deg);
    }
    100% {
        transform: skewX(0deg) skewY(0deg);
    }
}

/* 特殊效果动画 */
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
}

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

@keyframes rubberBand {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scaleX(1.25) scaleY(0.75);
    }
    40% {
        transform: scaleX(0.75) scaleY(1.25);
    }
    50% {
        transform: scaleX(1.15) scaleY(0.85);
    }
    65% {
        transform: scaleX(0.95) scaleY(1.05);
    }
    75% {
        transform: scaleX(1.05) scaleY(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* 动画类 */
.animate__animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.animate__fadeIn {
    animation-name: fadeIn;
}

.animate__fadeInUp {
    animation-name: fadeInUp;
}

.animate__fadeInDown {
    animation-name: fadeInDown;
}

.animate__fadeInLeft {
    animation-name: fadeInLeft;
}

.animate__fadeInRight {
    animation-name: fadeInRight;
}

.animate__slideInUp {
    animation-name: slideInUp;
}

.animate__slideInDown {
    animation-name: slideInDown;
}

.animate__slideInLeft {
    animation-name: slideInLeft;
}

.animate__slideInRight {
    animation-name: slideInRight;
}

.animate__zoomIn {
    animation-name: zoomIn;
}

.animate__bounce {
    animation-name: bounce;
}

.animate__pulse {
    animation-name: pulse;
}

.animate__shake {
    animation-name: shake;
}

.animate__swing {
    animation-name: swing;
}

.animate__tada {
    animation-name: tada;
}

.animate__wobble {
    animation-name: wobble;
}

.animate__jello {
    animation-name: jello;
}

.animate__heartBeat {
    animation-name: heartBeat;
}

.animate__flash {
    animation-name: flash;
}

.animate__rubberBand {
    animation-name: rubberBand;
}

/* 动画延迟 */
.animate__delay-1s {
    animation-delay: 1s;
}

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

.animate__delay-3s {
    animation-delay: 3s;
}

.animate__delay-4s {
    animation-delay: 4s;
}

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

/* 动画速度 */
.animate__slow {
    animation-duration: 2s;
}

.animate__slower {
    animation-duration: 3s;
}

.animate__fast {
    animation-duration: 800ms;
}

.animate__faster {
    animation-duration: 500ms;
}

/* 无限循环 */
.animate__infinite {
    animation-iteration-count: infinite;
}

/* 反向播放 */
.animate__reverse {
    animation-direction: reverse;
}

/* 交替播放 */
.animate__alternate {
    animation-direction: alternate;
}

/* 暂停动画 */
.animate__paused {
    animation-play-state: paused;
}