Твіттер нещодавно оновив дизайн кнопки "До обраного", додавши нову анімацію. В її основі не лежать CSS переходи, а використовуються серії зображень. Сьогодні ми розглянемо як відтворити анімацію за допомогою CSS функції steps().
Ілюзія руху
Ефект схожий на Зоотроп, серію послідовних ілюстрацій.
Демо
Наведіть курсор на зірочку, щоб побачити приклад анімації:
У цьому прикладі ми починаємо зі створення серії зображень, які утворюють анімацію. В даному випадку ми використовуємо частину набору зображень для кнопки "До обраного" в Твіттері:
Щоб оживити ці кадри, ми повинні поставити їх в одну лінію, так ми зможемо перейти від першого до останнього кадру шляхом позиціонування фону:
Функція steps()
Більшість подібних функцій робить плавний перехід між початковим і кінцевим елементом. Функція steps() відрізняється. Замість плавного переходу, вона ділить його на кілька кроків і робить різку зміну між цими кроками.
Для початку ми створюємо HTML:
<section class="fave"></section>
Фонове зображення
Тепер ми можемо додати трохи стайлінгу і встановити фонове зображення.
.fave {
width: 70px;
height: 50px;
background: url(images/twitter_fave.png) no-repeat;
background-position: 0 0;
}
Для ховеру вказується, що при наведенні, фонове зображення повинно рухатися до кінцевої позиції:
.fave:hover {
background-position: -3519px 0;
transition: background 1s steps(55);
}
Зверніть увагу на друге правило, яке визначає transition. В даному випадку ми хочемо виконати перехід протягом однієї секунди для нашого фону, скориставшись функцією steps(). Steps має значення 55, так як в анімації 55 кадрів.
Ефект полягає в тому, що коли курсор миші знаходиться на елементі, він стрибає через перехід в 55 рівних кроків.
Чому не GIF?
В цьому випадку, GIF-анімація нам не дуже підходить. Розмір файлу, як правило, більше і доволі складно контролювати кадри. За допомогою метода, який ми використовуємо, можна робити паузу, перемотування назад, або різні інші коригування анімації за допомогою CSS.
Інші способи використання "steps()"
Анімація фонові спрайти - це лише один з варіантів використання функції steps(). Підходить все, що може бути анімоване серією дискретних кроків. Наприклад, можна використати цю техніку, щоб створити ефект цокання годинника.
Ще немає коментарів