Анімація множинного фону CSS

29

Від автора: анімація фону 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;
}

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

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