От автора: анимация фона CSS долго служила поводом для горячих споров, в основном потому, что весьма очаровательно смотрится и не требует дополнительных элементов. Меня недавно спросили, можно ли добиться множественной фоновой анимации для данного элемента, и я ответил: да… с некоторыми оговорками. Давайте посмотрим, как ее сделать!
CSS
Итак, несколько фоновых изображений в элементе – то, что мы уже некоторое время делаем, просто отделите их запятыми:
|
1 2 3 4 5 |
.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, также разделенных запятыми:
|
1 2 3 4 5 6 7 8 |
@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; } |
Результат – три движущихся участка внутри одного элемента!
Конечно, это неидеальный случай, так как нельзя менять background-position по отдельности и, таким образом, вам придется работать с одинаковой продолжительностью для каждого фонового изображения. Множественную анимацию можно установить на селекторы с помощью CSS, но так как это единственное изменяемое свойство, то нам просто не повезло!
Автор: David Walsh
Источник: //davidwalsh.name/
Редакция: Команда webformyself.
