Анимация множественного фона CSS

Анимация множественного фона CSS

От автора: анимация фона CSS долго служила поводом для горячих споров, в основном потому, что весьма очаровательно смотрится и не требует дополнительных элементов. Меня недавно спросили, можно ли добиться множественной фоновой анимации для данного элемента, и я ответил: да… с некоторыми оговорками. Давайте посмотрим, как ее сделать!

демо

CSS

Итак, несколько фоновых изображений в элементе – то, что мы уже некоторое время делаем, просто отделите их запятыми:

.animate-area { 
 background-image: url(twitter-logo-bird.png), url(treehouseFrog.png), url(bg-clouds.png);
 background-position: 20px -90px, 30px 80px, 0px 0px;
 background-repeat: no-repeat, no-repeat, repeat-x;
}

Обратите внимание, что фоновое изображение, которое будет самым верхним, должно быть в списке изображений первым. Анимация фона требует изменения background-position, также разделенных запятыми:

@keyframes animatedBird {
 from { background-position: 20px 20px, 30px 80px, 0 0; }
 to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
 
.animate-area { 
 animation: animatedBird 4s linear infinite;
}

Результат – три движущихся участка внутри одного элемента!


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Конечно, это неидеальный случай, так как нельзя менять background-position по отдельности и, таким образом, вам придется работать с одинаковой продолжительностью для каждого фонового изображения. Множественную анимацию можно установить на селекторы с помощью CSS, но так как это единственное изменяемое свойство, то нам просто не повезло!

Автор: David Walsh

Источник: http://davidwalsh.name/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Учебник по основам CSS для начинающих

Прямо сейчас изучи CSS с нуля!

Смотреть курс

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree