Создаем анимированное слайдшоу на CSS

Доброго времени суток, друзья!

Устал от JS, переключись на CSS!

Задача

Сделать анимированное слайдшоу средствами CSS. Слайдшоу можно использовать, например, в торжественных случаях для вывода фото на экран через проектор. Посредством зацикливания выводимые фото могут служить фоном для торжественной речи.

Возможное решение

Для слайдшоу возьмем странные «макрофото» Paweł Czerwiński (они прикольные).

Итак, поехали.

Наша разметка будет выглядеть так:

<div class="slideshow">
    <img src="https://thebestcode.ru/media/animatedSlideshow/1.jpg" alt="#" class="i_1">
    <p class="p_1">a-slide</p>
    <img src="https://thebestcode.ru/media/animatedSlideshow/2.jpg" alt="#" class="i_2">
    <p class="p_2">b-slide</p>
    <img src="https://thebestcode.ru/media/animatedSlideshow/3.jpg" alt="#" class="i_3">
    <p class="p_3">c-slide</p>
    <img src="https://thebestcode.ru/media/animatedSlideshow/4.jpg" alt="#" class="i_4">
    <p class="p_4">d-slide</p>
    <img src="https://thebestcode.ru/media/animatedSlideshow/5.jpg" alt="#" class="i_5">
    <p class="p_5">e-slide</p>
    <img src="https://thebestcode.ru/media/animatedSlideshow/6.jpg" alt="#" class="i_6">
    <p class="p_6">f-slide</p>
</div>

Что мы здесь наблюдаем?

Фото обернуты в класс «slideshow», который используется для выравнивания элементов по горизонтали и вертикали.

.slideshow имеет следующие стили:

.slideshow {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

У нас имеется 6 фото. Каждому фото присвоен класс «i_номер фото». Под каждым фото — подпись с классом «p_номер фото».

Img имеет следующие стили:

img {
    position: absolute;
    max-width: 90vw;
    max-height: 80vh;
    opacity: 0;
    animation: slideshow 36s ease-in-out infinite;
}

Время анимации зависит от количества фото и времени показа каждой фотографии. В данном случае: 6 фотографий по 6 секунд каждая.

Переходим к анимации:

@keyframes slideshow {
    from {
        opacity: 0;
        filter: grayscale(100%);
    }

    5% {
        opacity: 1;
        filter: grayscale(50%);
    }

    10% {
        opacity: 1;
        filter: grayscale(0);
        transform: scale(1.1);
    }

    15% {
        opacity: 1;
        filter: blur(0);
    }

    20% {
        opacity: 0;
        filter: blur(2px);
        transform: scale(0.9);
    }

    25% {
        opacity: 0;
    }
}

Мы используем лишь 25% анимации, но в шесть шагов. 25% — это четвертая часть, поэтому фотографии будут немного накладываться друг на друга. Поскольку мы реализуем эффект «fade in-fade out», т.е. работаем с прозрачностью, это как раз то, что нам нужно.

С помощью «filter: grayscale» мы насыщаем цветом выводимую (обесцвеченную) фотографию, с помощью «transform: scale» мы масштабируем фото немного вперед при выводе и немного назад при замещении, с помощью «filter: blur» мы размываем замещаемую фотографию.

Далее работаем с отдельными фото:

.slideshow .i_1 {
    animation-delay: 6s;
    transform: translateX(-100px) rotate(-3deg);
}

.slideshow .i_2 {
    animation-delay: 12s;
    transform: translateX(100px) rotate(3deg);
}

.slideshow .i_3 {
    animation-delay: 18s;
    transform: translateY(-100px) rotate(3deg);
}

.slideshow .i_4 {
    animation-delay: 24s;
    transform: translateY(100px) rotate(-3deg);
}

.slideshow .i_5 {
    animation-delay: 30s;
    transform: rotate(-6deg);
}

.slideshow .i_6 {
    animation-delay: 36s;
    transform: rotate(6deg);
}

Устанавливаем каждой фотографии задержку анимации (6 секунд первой и +6 секунд каждой последующей). Для разнообразия смещаем и поворачиваем каждое фото с помощью «transform: translate rotate» (значения подбирались опытным путем).

С фото закончили. Теперь займемся подписями.

P имеет следующие стили:

p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #e4e4e4;
    text-shadow: 0 0 1px #000;
    text-transform: uppercase;
    font-size: 2.8em;
    opacity: 0;
    animation: title 36s linear infinite;
}

Время анимации подписей соответствует времени анимации фото.

Анимация подписей выглядит намного проще:

@keyframes title {
    from {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }
}

Отдельную подпись выводим также с помощью задержки анимации:

.slideshow .p_1 {
    animation-delay: 7s;
}

.slideshow .p_2 {
    animation-delay: 13s;
}

.slideshow .p_3 {
    animation-delay: 19s;
}

.slideshow .p_4 {
    animation-delay: 25s;
}

.slideshow .p_5 {
    animation-delay: 31s;
}

.slideshow .p_6 {
    animation-delay: 37s;
}

Обратите внимание, что задержка анимации подписей на 1 секунду больше соответствующих значений фото. Это сделано для того, чтобы выводить подписи после появления и трансформации конкретной фотографии.

Вот и все. По-моему, получилось просто, но интересно.

Результат можно посмотреть здесь.

Благодарю за внимание.