Твіттер нещодавно оновив дизайн кнопки "До обраного", додавши нову анімацію. В її основі не лежать 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()
. Підходить все, що може бути анімоване серією дискретних кроків. Наприклад, можна використати цю техніку, щоб створити ефект цокання годинника.
Ще немає коментарів