Що таке @keyframes в анімаціях?

CSSJunior~1 хв читання

@keyframes - це правило в CSS, яке задає ключові кадри анімації: набір станів елемента в різні моменти часу. Анімація потім плавно «програє» переходи між цими кадрами.

Формат:

css

@keyframes animation-name {
  0%   { /* початковий стан */ }
  50%  { /* проміжний стан */ }
  100% { /* кінцевий стан */ }
}

Після оголошення анімації її підключають до елемента через властивість animation:

css

.box {
  animation: animation-name 2s infinite;
}

Суть: @keyframes визначає що відбувається на кожному етапі анімації, а animation - як і коли це програється.

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

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

Premium

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