Автоматическая смена фонового изображения в блоке на чистом CSS

Смена фонового изображения на CSS с использованием CSS-анимации

Реализуется автоматическая смена фонового изображения на CSS с использованием @keyframes и animation. Рассмотрим базовый пример, где фон меняется каждые 5 секунд:

@keyframes backgroundChange {
    0% { background-image: url('image1.jpg'); }
    33% { background-image: url('image2.jpg'); }
    66% { background-image: url('image3.jpg'); }
    100% { background-image: url('image1.jpg'); }
}
.block {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    animation: backgroundChange 15s infinite;
}

В этом примере @keyframes задает этапы смены фонового изображения, а animation применяет этот эффект к блоку.

Альтернативный метод: градиент и прозрачность

Если менять фоновые изображения напрямую невозможно, можно использовать два наложенных псевдоэлемента ::before и ::after, чередуя их прозрачность:

.block {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.block::before,
.block::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 5s;
}
.block::before {
    background-image: url('image1.jpg');
    animation: fade1 10s infinite;
}
.block::after {
    background-image: url('image2.jpg');
    animation: fade2 10s infinite;
}
@keyframes fade1 {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}
@keyframes fade2 {
    0%, 50% { opacity: 0; }
    50.01%, 100% { opacity: 1; }
}

Этот метод позволяет создать плавное переключение фона без рывков. Изображения будут плавно меняться каждые 5 секунд.

Динамичное добавление изображений в блок

Не совсем удобно добавлять URL изображения  из файла стилей, если понадобится изменить изображение — придётся редактировать файлы темы. Чаще автоматическая смена фонового изображения реализуется с динамично добавляемыми изображениями. Если сайт на WordPress, изображения легче всего добавлять при помощи плагина ACF. Для такого случая используем следующую разметку HTML:

<div class="cb-slideshow_outer">
    <ul class="cb-slideshow">
        <li>
            <div>Lorem ipsum dolor sit amet</div>
        <span style="background-image: url('https://picsum.photos/1024/560?random=1')"></span>
    </li>
    <li>
        <div>Aenean vitae elit a massa dapibus tincidunt</div>
        <span style="background-image: url('https://picsum.photos/1024/560?random=2')"></span>
    </li>
    <li>
        <div>Etiam efficitur convallis</div>
        <span style="background-image: url('https://picsum.photos/1024/560?random=3')"></span>
    </li>
    <li>
        <div>Duis ac sapien maximus, tincidunt arcu</div>
        <span style="background-image: url('https://picsum.photos/1024/560?random=4')"></span>
    </li>
    <li>
        <div>Quisque turpis dui</div>
        <span style="background-image: url('https://picsum.photos/1024/560?random=5')"></span>
    </li>
    <li>
        <div>Praesent eget convallis eros</div>
        <span style="background-image: url('https://picsum.photos/1024/560?random=6')"></span>
    </li>
    </ul>
</div>

И далее стили:

.cb-slideshow_outer {
  position: relative;
  width: 100%;
}
ul.cb-slideshow {
  list-style-type: none;
  padding: 0;
  margin: 0!important;
  aspect-ratio: 16/9;
  position: relative; 
  overflow: hidden; 
  width: 100%;
}
.cb-slideshow::after {
  height: 100%;
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
.cb-slideshow:after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,.3);
}
.cb-slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  -webkit-animation: imageAnimation 36s linear infinite 0s;
  -moz-animation: imageAnimation 36s linear infinite 0s;
  -o-animation: imageAnimation 36s linear infinite 0s;
  animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
  z-index: 1000;
  position: absolute;
  bottom: rem(10);
  left: 0;
  width: 100%;
  text-align: right;
  opacity: 0;
  background-color: rgba(0,0,0,.3);
  padding: rem(5) rem(20);
  -webkit-animation: titleAnimation 36s linear infinite 0s;
  -moz-animation: titleAnimation 36s linear infinite 0s;
  -o-animation: titleAnimation 36s linear infinite 0s;
  animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li:nth-child(2) span,
.cb-slideshow li:nth-child(2) div  {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span, .cb-slideshow li:nth-child(3) div {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span, .cb-slideshow li:nth-child(4) div {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span, .cb-slideshow li:nth-child(5) div {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span, .cb-slideshow li:nth-child(6) div {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  animation-delay: 30s;
}
.cb-slideshow:hover li span, .cb-slideshow:hover div {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}
@-webkit-keyframes imageAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    transform: scale(1.05);
    -webkit-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    transform: scale(1.1);
  }
  25% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% { opacity: 0 }
}
@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    transform: scale(1.1);
  }
  25% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% { opacity: 0 }
}
@keyframes titleAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% { opacity: 0 }
}

В этом варианте кода немного больше, но и смотрится он намного эффектнее, особенно при полноэкранном расположении.

Выглядеть автоматическая смена фонового изображения на  CSS из представленного кода будет так:

Если возникнет необходимость останавливать анимацию при наведении курсора добавьте к стилям такой код:

.cb-slideshow:hover li span, .cb-slideshow:hover li div {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

URL изображений измените на свои. Заголовок изображения можно стилями разместить в любом месте в блоке.

Заключение

Автоматическая смена фона на CSS возможна без использования JavaScript. Вариант с @keyframes подойдет для простых случаев, а метод с ::before и ::after обеспечит более плавный переход. Вариант с динамично добавляемыми изображениями позволит не вмешиваться в код стилей при изменении изображений.  Все способы удобны для легковесных анимаций, не перегружающих сайт лишним кодом.

Узнайте также как добавить на сайт простую карусель с бесконечной прокруткой на чистом CSS.