Кен Бёрнс слайдшоу

Фото медленно оседают из увеличенного масштаба с лёгким паном и сменяются кроссфейдом. Чистый CSS.

Просто смотрите.

Код

<div class="kb">
  <div class="slide" style="background-image:url(a.jpg)"></div>
  <div class="slide" style="background-image:url(b.jpg); animation-delay:5s"></div>
  <div class="slide" style="background-image:url(c.jpg); animation-delay:10s"></div>
</div>

<style>
.kb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  animation: kb 15s infinite; }          /* 3 слайда × 5s */
@keyframes kb {
  0%   { opacity: 0; transform: scale(1.08) translate(1.5%, 1%); }
  6%   { opacity: 1; }
  33%  { opacity: 1; transform: scale(1) translate(0, 0); }
  39%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.08) translate(-1%, 1.5%); }
}
</style>

Промпт для ИИ

Сделай слайдшоу Кена Бёрнса на чистом CSS: контейнер overflow:hidden, слайды absolute inset:0 background cover. Одна общая @keyframes-анимация длиной слайды×5s infinite: слайд появляется (opacity 0→1 к 6%), медленно оседает из scale(1.08) с лёгким сдвигом translate к scale(1) на 33%, растворяется к 39%. Каждому следующему слайду animation-delay +5s. Никакого JS. При prefers-reduced-motion показывать первый слайд статично.