Плавная смена слайдов через исчезновение css

Question

Есть стандартная разметка на HTML, CSS. Хотел переделать обычный съезд в сторону на плавное появление и исчезновение. Но код упорно шлёт нах... (JS не предлагать)

/* slides */
.slides {
    width: 100%;
    height: 600px;
    position: absolute;
    overflow: hidden;
}

.slide {
    width: 100%;
    height: auto;
    display: flex;
    animation: slide 12s infinite;
}

.slide img {
    width: 100%;
}

@keyframes slide {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
        transform: scale(1.05);
    }
    50% {
        opacity: 0;
        transform: scale(1.05);
    }
    55% {
        opacity: 1;
        transform: scale(1.05);
    }
    80% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
    }
}

<div class="slides">
    <div class="slide">
        <img src="./img/500107.jpg" alt="">
        <img src="./img/500109.jpg" alt="">
        <img src="./img/501155.jpg" alt="">
        <img src="./img/499713.jpg" alt="">
    </div>
</div>

Изначальный стиль @keyframes был таким

@keyframes slide{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(0);
    }
    30%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-100%);
    }
    55%{
        transform: translateX(-200%);
    }
    75%{
        transform: translateX(-200%);
    }
    80%{
        transform: translateX(-300%);
    }
    100%{
        transform: translateX(-300%);
    }
}

БЛОГ НА HUSL

Плавная смена слайдов через исчезновение css

Ответы (0 шт):