.sliding-wrap {
    overflow: hidden;
    height: 650px;
    display: flex;
    position: relative;
}

.sliding-wrap:before {
    content: '';
    position: absolute;
    box-shadow: 0 100px 57px -38px rgba(255, 255, 255, 1) inset;
    width: 100%;
    max-width: 680px;
    height: 100%;
    z-index: 1;
}

.sliding-wrap:after {
    content: '';
    position: absolute;
    box-shadow: 0 -100px 57px -38px rgba(255, 255, 255, 1) inset;
    width: 100%;
    max-width: 680px;
    height: 100%;
    z-index: 1;
}

.sliding-background {
    --topImageHeight: 1527px;
    --bottomImageHeight: 1731px;
    width: 50%;
    background-position: 0 0;
    background-repeat: repeat !important;
    max-width: 340px;
    background-size: contain;
}

.sliding-background--top {
    animation: slide-top 35s linear infinite;
    height: calc(var(--topImageHeight) * 2);
}

.sliding-background--bottom {
    animation: slide-bottom 35s linear infinite;
    height: calc(var(--bottomImageHeight) * 2);
}

@keyframes slide-top {
    from {
        transform: translateY(calc(var(--topImageHeight) * -0.25)); /* Фон начинает двигаться немного раньше */
    }
    to {
        transform: translateY(calc(var(--topImageHeight) * -1)); /* Окончательное положение */
    }
}


@keyframes slide-bottom {
    0%{
        transform: translateY(calc(var(--bottomImageHeight) * -1));
    }
    100%{
        transform: translateY(0%);
    }
}