Практика з CSS-анімації

Зміни значення

Усі правила CSS збудовано однаково. Селектор, тут це .box, визначає, які елементи сторінки оформлюємо. У фігурних дужках іде перелік пар властивість: значення;. Це правило каже квадрату бути 120 пікселів завширшки, 120 заввишки й помаранчевим.

У редакторі лежить саме це правило. Усе, що набираєш, одразу видно в результаті.

Якщо набираєш, а нічого не змінюється, шукай одруківку. Рядок, якого CSS не розуміє, він просто пропускає й нічого про це не каже. Найчастіше бракує двокрапки після властивості або крапки з комою в кінці рядка.

Додай свій перший перехід

Наведи курсор на кнопку. На сенсорному екрані торкнися її, а потім торкнися десь поруч. Кнопка більшає й міняє колір одним стрибком. Друге правило, .button:hover, діє лише доти, доки курсор над кнопкою, і браузер перемикається на нього миттєво.

Перехід (transition) велить браузерові не поспішати, коли значення змінюється. Рядок transition: transform 300ms ease; відповідає на три запитання:

transform

Яку властивість анімувати.

300ms

Скільки це триває. 300 мілісекунд — це 0,3 секунди.

ease

З якою плавністю: жвавий старт, м’яке гальмування наприкінці.

Перехід пишемо в .button, а не в .button:hover, щоб він працював в обидва боки: і коли курсор з’являється, і коли йде геть. Потім перенеси цей рядок у правило з :hover і подивися, що станеться на зворотному шляху.

Зміни плавність

Наведи курсор на результат, і квадрат поїде праворуч. Селектор .track:hover .box означає «елемент .box, поки курсор над доріжкою .track, у якій він лежить».

Квадрат їде з однаковою швидкістю від початку до кінця. Саме це й означає linear, і вигляд у такого руху механічний, бо справжні предмети розганяються й гальмують. Останнє слово в переході задає плавність (easing). Вона змінює характер руху, а відстань і час лишаються ті самі:

linear

Стала швидкість.

ease

Швидкий старт, м’яка зупинка. Типове значення.

ease-in-out

Повільний старт, швидка середина, повільна зупинка.

cubic-bezier(…)

Власна крива, яку задають чотири числа.

В інтерфейсах рух здебільшого виглядає доречно, коли триває від 150 до 400 мілісекунд. Якщо довше, людина вже чекає, поки він закінчиться.

Напиши свої перші ключові кадри

Перехід треба чимось запустити, і знає він лише початок та кінець. Ключові кадри (keyframes) потрібні для руху, який починається сам, повторюється або має більше двох кроків.

Складників два. @keyframes bounce { … } — це список кроків, який має назву. Відсотки позначають моменти часу: 0% — початок, 50% — середина, 100% — кінець. А рядок animation в елемента каже: «відтвори цей список на мені».

translateY зсуває елемент по вертикалі. Від’ємні числа — це вгору.

Цей рядок читається так: відтворюй bounce, один прохід триває 1 секунду, розгін і гальмування плавні, повторюй без кінця. А тепер поекспериментуй. Заміни 1s на 400ms або -100px на -30px і подивися, як змінюється характер того самого м’ячика.

Запусти три крапки хвилею

У трьох крапок спільна анімація, тому пульсують вони одночасно. Знайома хвиля «хтось набирає повідомлення» виходить з однієї дрібної зміни: кожна крапка стартує трохи пізніше за попередню.

animation-delay задає, скільки елемент чекає, перш ніж його анімація почнеться. В HTML кожна крапка має два класи: dot для спільних стилів і власний, dot-1, dot-2 чи dot-3. Розгорни «HTML, до якого застосовується цей CSS» під результатом і побачиш їх.

Спробуй 80ms і 160ms, і хвиля стане щільнішою. Або 330ms і 660ms, тоді крапки спалахуватимуть по черзі. Ключові кадри при цьому ті самі, змінюється лише час старту.

Подбай про тих, кому рух заважає

Декому від активного або нескінченного руху на екрані паморочиться в голові чи стає зле. У телефонах і комп’ютерах на такий випадок є налаштування, зазвичай воно зветься «Зменшення руху», і CSS уміє дізнатися, чи його ввімкнено.

Для цього є блок @media. Правила всередині нього діють лише тоді, коли умова в круглих дужках справджується. Тут умова така: «людина попросила менше руху», а правило всередині вимикає анімацію.

І ще одна новинка: текст між /* та */ — це коментар. Він для людей, браузер його пропускає.

@media (prefers-reduced-motion: reduce) {
  .ball {
    animation: none;
  }
}

Справжній перемикач шукай у налаштуваннях доступності своєї системи. На Mac: Системні параметри → Доступність → Дисплей → Зменшити рух. У Windows 11: Параметри → Спеціальні можливості → Візуальні ефекти → Ефекти анімації.

Завдання із зірочкою: індикатор завантаження

Цього разу без заготовок із пропусками. Кільце вже намальоване: це коло з темною рамкою, один бік якої помаранчевий. Такий індикатор називають спінером (spinner). Твоя справа — змусити його крутитися. Знадобиться все з попередніх чотирьох вправ.

Маленька підказка: у ключових кадрах to означає те саме, що 100%. Початковий крок можна не писати, тоді браузер почне з того, як елемент виглядає зараз.

Коли перевірка пройде, пограйся ще:

• Зміни тривалість на 600ms, а потім на 3s.
• Заміни linear на ease-in-out і побачиш, чому для індикаторів завантаження беруть саме linear.
• Зроби рамку завтовшки 14px або пофарбуй у помаранчевий ще й border-right-color.
• Додай animation-direction: reverse;