Кадрҳои калидии анимация (keyframes) барои чӣ лозиманд ва онҳо чӣ гуна кор мекунанд?

Кадрҳои калидӣ (keyframes) дар CSS барои муайян кардани ҳолатҳои миёнаи анимация истифода мешаванд. Онҳо имкон медиҳанд, ки муайян карда шавад, ки чӣ гуна хосиятҳои унсур дар вақтҳои гуногун дар тӯли анимация тағйир меёбанд.

Ҳамчун мисол: шумо маҷмӯи услубҳоро барои дарсади муайяни вақт (масалан, 0%, 50%, 100%) тасвир мекунед, ва браузер ба таври ҳамвор арзишҳоро байни ин ҳолатҳо интерполатсия мекунад.

Масалан:

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.element {
  animation: fadeIn 2s ease-in-out;
}

Дар ин мисол, унсур ба таври ҳамвор пайдо мешавад (тозаӣ аз 0 то 1 тағйир меёбад) дар 2 сония.

Бинобар ин, кадрҳои калидӣ имкон медиҳанд, ки анимацияҳои мураккаб ва ҳамвор эҷод карда шаванд, ки нуқтаҳои калидии тағйироти услубҳоро муайян мекунанд.