/*顺时针过渡动画*/
@keyframes card-slide-fadeout {
    to { opacity: var(--slide-fadeout-opacity); }
}
@keyframes card-slide-prior {
    to { top: var(--slide-prior-top); left: var(--slide-prior-left); width: var(--slide-prior-width); }
}
@keyframes card-slide-prev {
    to { top: var(--slide-prev-top); left: var(--slide-prev-left); width: var(--slide-prev-width); opacity: var(--slide-prev-opacity); }
}
@keyframes card-slide-actived {
    to { top: var(--slide-actived-top); opacity: var(--slide-actived-opacity); }
}
/*逆时针过渡动画*/
@keyframes card-slide-prior-out {
    to { opacity: var(--slide-prior-opacity); }
}
@keyframes card-slide-prev-out {
    to { top: var(--slide-prev-top); left: var(--slide-prev-left); width: var(--slide-prev-width); }
}
@keyframes card-slide-actived-out {
    to { top: var(--slide-actived-top); left: var(--slide-actived-left); width: var(--slide-actived-width); opacity: var(--slide-actived-opacity); }
}
@keyframes card-slide-next-out {
    to { top: var(--slide-next-top); opacity: var(--slide-next-opacity); }
}
.card-swiper { overflow: hidden; }
/*顺时针过渡*/
.card-wrapper {
    --slide-top: 0;
    --slide-left: 0;
    --slide-width: 100%;
    --slide-opacity: 0;

    --slide-fadeout-top: -30px;
    --slide-fadeout-left: 5%;
    --slide-fadeout-width: 90%;
    --slide-fadeout-opacity: 0;

    --slide-prior-top: -30px;
    --slide-prior-left: 5%;
    --slide-prior-width: 90%;
    --slide-prior-opacity: 0.47;

    --slide-prev-top: -15px;
    --slide-prev-left: 2.5%;
    --slide-prev-width: 95%;
    --slide-prev-opacity: 0.47;

    --slide-actived-top: 0;
    --slide-actived-left: 0;
    --slide-actived-width: 100%;
    --slide-actived-opacity: 1;

    --slide-next-top: 40%;
    --slide-next-left: 0;
    --slide-next-width: 100%;
    --slide-next-opacity: 0;

    width: 100%;
    height: 100%;
    position: relative;
}
.card-wrapper .card-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    --duration: 1s;
    animation-duration: var(--duration);
    animation-fill-mode: forwards;
    animation-delay: calc(var(--duration) * var(--delay, 0));
    animation-play-state: running;
}
.card-wrapper .card-slide-fadeout {
    display: block;
    top: var(--slide-prior-top);
    left: var(--slide-prior-left);
    width: var(--slide-prior-width);
    opacity: var(--slide-prior-opacity);
    z-index: 1;
    animation-name: card-slide-fadeout;
}
.card-wrapper .card-slide-prior {
    top: var(--slide-prev-top);
    left: var(--slide-prev-left);
    width: var(--slide-prev-width);
    opacity: var(--slide-prev-opacity);
    z-index: 2;
    display: block;
    animation-name: card-slide-prior;
}
.card-wrapper .card-slide-prev {
    display: block;
    top: var(--slide-actived-top);
    left: var(--slide-actived-left);
    width: var(--slide-actived-width);
    opacity: var(--slide-actived-opacity);
    z-index: 3;
    animation-name: card-slide-prev;
}
.card-wrapper .card-slide-actived {
    z-index: 4;
    display: block;
    animation-name: card-slide-actived;
    top: var(--slide-next-top);
    left: var(--slide-next-left);
    width: var(--slide-next-width);
    opacity: var(--slide-next-opacity);
}
.card-wrapper .card-slide-next {
    top: var(--slide-next-top);
    left: var(--slide-next-left);
    width: var(--slide-next-width);
    opacity: var(--slide-next-opacity);
    z-index: 1;
    display: block;
}
/*逆时针过渡*/
.card-wrapper.card-reverse-ani .card-slide-prior{
    top: var(--slide-fadeout-top);
    left: var(--slide-fadeout-left);
    width: var(--slide-fadeout-width);
    opacity: var(--slide-fadeout-opacity);
    animation-name: card-slide-prior-out;
}
.card-wrapper.card-reverse-ani .card-slide-prev{
    top: var(--slide-prior-top);
    left: var(--slide-prior-left);
    width: var(--slide-prior-width);
    opacity: var(--slide-prior-opacity);
    animation-name: card-slide-prev-out;
}
.card-wrapper.card-reverse-ani .card-slide-actived{
    top: var(--slide-prev-top);
    left: var(--slide-prev-left);
    width: var(--slide-prev-width);
    opacity: var(--slide-prev-opacity);
    animation-name: card-slide-actived-out;
}
.card-wrapper.card-reverse-ani .card-slide-next{
    top: var(--slide-actived-top);
    left: var(--slide-actived-left);
    width: var(--slide-actived-width);
    opacity: var(--slide-actived-opacity);
    animation-name: card-slide-next-out;
}
/*暂停动画*/
.card-wrapper.card-paused-ani .card-slide{
    animation-play-state: paused;
}