/* 自己写自己用的动画 */

/* 使用CSS变量统一管理 */
:root {
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --duration-medium: 0.7s;
}

.opacity {
    animation: opacity var(--duration-medium) var(--ease-out-quad) forwards;
    -webkit-animation: opacity var(--duration-medium) var(--ease-out-quad) forwards;
}

.left-right {
    animation: left-right var(--duration-medium) var(--ease-out-quad) forwards;
    -webkit-animation: left-right var(--duration-medium) var(--ease-out-quad) forwards;
}

.right-left {
    animation: right-left var(--duration-medium) var(--ease-out-quad) forwards;
    -webkit-animation: right-left var(--duration-medium) var(--ease-out-quad) forwards;
}

.bottom-top {
    animation: bottom-top var(--duration-medium) var(--ease-out-quad);
    -webkit-animation: bottom-top var(--duration-medium) var(--ease-out-quad);
}

.top-bottom {
    animation: top-bottom 0.3s var(--ease-out-quad) forwards;
    -webkit-animation: top-bottom 0.3s var(--ease-out-quad) forwards;
}

.translate-top-x-y {
    animation: translation-top-left var(--duration-medium) var(--ease-out-quad);
    -webkit-animation: translation-top-left var(--duration-medium) var(--ease-out-quad);
}

.translate-top-y-x {
    animation: translation-top-right var(--duration-medium) var(--ease-out-quad);
    -webkit-animation: translation-top-right var(--duration-medium) var(--ease-out-quad);
}

.translate-bottom-x-y {
    animation: translation-bottom-left var(--duration-medium) var(--ease-out-quad);
    -webkit-animation: translation-bottom-left var(--duration-medium) var(--ease-out-quad);
}

.translate-bottom-y-x {
    animation: translation-bottom-right var(--duration-medium) var(--ease-out-quad);
    -webkit-animation: translation-bottom-right var(--duration-medium) var(--ease-out-quad);
}

/* 头部进入效果 */
@keyframes translation {
    0% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
    }
}

/* 头部退出效果 */
@keyframes quits {
    0% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
    }
}

/* 入场渐隐 效果 */
@keyframes opacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 退场渐隐效果 */
@keyframes quitOpacity {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* 左滑右效果 */
@keyframes left-right {
    0% {
        opacity: 0;
        transform: translateX(-10rem);
        -webkit-transform: translateX(-10rem);
        -moz-transform: translateX(-10rem);
        -ms-transform: translateX(-10rem);
        -o-transform: translateX(-10rem);
    }

    80% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }

    100% {
        opacity: 1;
    }
}

/* 右滑左效果 */
@keyframes right-left {
    0% {
        opacity: 0;
        transform: translateX(10rem);
        -webkit-transform: translateX(10rem);
        -moz-transform: translateX(10rem);
        -ms-transform: translateX(10rem);
        -o-transform: translateX(10rem);
    }

    80% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }

    100% {
        opacity: 1;
    }
}

/* 从下往上 */
@keyframes bottom-top {
    0% {
        opacity: 0;
        transform: translateY(5rem);
        -webkit-transform: translateY(5rem);
        -moz-transform: translateY(5rem);
        -ms-transform: translateY(5rem);
        -o-transform: translateY(5rem);
    }

    80% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }

    100% {
        opacity: 1;
    }
}

/* 从上往下 */
@keyframes top-bottom {
    0% {
        transform: translateY(-5rem);
        -webkit-transform: translateY(-5rem);
        -moz-transform: translateY(-5rem);
        -ms-transform: translateY(-5rem);
        -o-transform: translateY(-5rem);
        opacity: 0;
    }

    85% {

        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }

    100% {
        opacity: 1;
    }
}

/* translate 左上移动到原位置 */
@keyframes translation-top-left {
    0% {
        opacity: 0;
        transform: translate(-5rem, -5rem);
        -webkit-transform: translate(-5rem, -5rem);
        -moz-transform: translate(-5rem, -5rem);
        -ms-transform: translate(-5rem, -5rem);
        -o-transform: translate(-5rem, -5rem);
    }

    80% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
    }

    100% {
        opacity: 1;
    }
}

/* translate 右上移动到原位置 */
@keyframes translation-top-right {
    0% {
        opacity: 0;
        transform: translate(5rem, -5rem);
        -webkit-transform: translate(5rem, -5rem);
        -moz-transform: translate(5rem, -5rem);
        -ms-transform: translate(5rem, -5rem);
        -o-transform: translate(5rem, -5rem);
    }

    80% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
    }

    100% {
        opacity: 1;
    }
}

/* translate 左下移动到原位置 */
@keyframes translation-bottom-left {
    0% {
        opacity: 0;
        transform: translate(-5rem, 5rem);
        -webkit-transform: translate(-5rem, 5rem);
        -moz-transform: translate(-5rem, 5rem);
        -ms-transform: translate(-5rem, 5rem);
        -o-transform: translate(-5rem, 5rem);
    }

    80% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
    }

    100% {
        opacity: 1;
    }
}

/* translate 右下移动到原位置 */
@keyframes translation-bottom-right {
    0% {
        opacity: 0;
        transform: translate(5rem, 5rem);
        -webkit-transform: translate(5rem, 5rem);
        -moz-transform: translate(5rem, 5rem);
        -ms-transform: translate(5rem, 5rem);
        -o-transform: translate(5rem, 5rem);
    }

    80% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
    }

    100% {
        opacity: 1;
    }
}

@keyframes transform-top-bottom {
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }
}

@keyframes transform-bottom-top {
    0% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
    }
}

/* 光线动画 */
@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%);
        -webkit-transform: translateX(-100%) translateY(-100%);
        -moz-transform: translateX(-100%) translateY(-100%);
        -ms-transform: translateX(-100%) translateY(-100%);
        -o-transform: translateX(-100%) translateY(-100%);
    }

    100% {
        transform: translateX(100%) translateY(100%);
        -webkit-transform: translateX(100%) translateY(100%);
        -moz-transform: translateX(100%) translateY(100%);
        -ms-transform: translateX(100%) translateY(100%);
        -o-transform: translateX(100%) translateY(100%);
    }
}

/* 骨架效果 */
.Heziyun-skeleton {
    background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1s ease infinite;
    -webkit-animation: skeleton-loading 1s ease infinite;
}

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

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