CSS3 плавна промяна на фона

В статията си CSS3 Плавен преход на изображения. Част 1 и продължение CSS3 Плавен преход на изображението. В част 2 говорих за това как можете плавно да променяте изображения на уеб страница с помощта на CSS3, а в статията CSS3Как да промените фона при задържане CSS спрайтове - за промяна на фона под курсора с помощта на CSS спрайтове.Гладка промяна на цвета на фона можете да намерите тук. Но понякога трябва непрекъснато плавно да променяте фоновите изображения с непроменено съдържание. Плавната промяна на фона с помощта на CSS3 е доста проста. От свойствата на CSS3 за плавни промени на фона, непрозрачността е може би най-подходящата.

Всичко започва с изчисляването и настройката на ключови кадри - @keyframes. Как се прави това, описах подробно в статията CSS3 Плавен преход на изображения. Част 1. На същото място забелязах, че ключови кадри, зададени веднъж, могат да се използват многократно, като обикновените CSS стилове. Следователно, за плавна промяна на фона, ще използвам същите @keyframes, които използвах за плавна промяна на изображенията.

В резултат на това ще получим блок с 4 плавно променящи се фонови изображения и непроменено съдържание.

HTML

За да приложим плавна промяна на 4 фонови изображения, нека създадем четири празни блока div и един със съдържание на същото ниво на влагане. Блокът със съдържание в HTML кода трябва да е последен.

CSS3

Като уточним, че всички наши div са блокове, които имат същия размер като родителския контейнер, както и една единствена позиция за разположение в този контейнер (с изключение на последния, съдържащ съдържанието), ние по същество имаме стек от слоеве. Накрая, добавяйки параметрите на предварително конфигурирани анимации, получаваме това, което искаме.