Skip to main content

Що таке «стани» в CSS-анімаціях?

CSSJunior~1 хв читання
Запропонувати правку

У контексті анімацій під «станами» розуміють фіксовані набори CSS-властивостей у певні моменти часу, між якими браузер створює плавний перехід. Ці стани задаються в @keyframes - через ключові кадри (from, to або відсотки - 0%, 50%, 100% тощо).

Приклад зі станами

css
@keyframes move { 0% { transform: translateX(0); } /* стан №1 */ 50% { transform: translateX(100px); } /* стан №2 */ 100% { transform: translateX(0); } /* стан №3 */ }

Тут анімація проходить три стани, а браузер сам добудовує плавність між ними.

Важливо:

  • стани = ключові кадри анімації
  • кожному стану відповідає свій набір стилів
  • анімація - це не сама властивість, а рух між станами в часі

Коротко: стан у CSS-анімації - це точка (кадр) із певними стилями, між якими відбувається плавна інтерполяція.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку