Ի՞նչ նպատակով են օգտագործվում անիմացիոն հիմնական կադրերը (keyframes) և ինչպես են նրանք աշխատում:

CSS-ում հիմնական կադրերը (keyframes) օգտագործվում են անիմացիայի միջանկյալ վիճակները սահմանելու համար: Դրանք թույլ են տալիս որոշել, թե ինչպես կփոխվեն տարրի հատկությունները տարբեր ժամանակներում անիմացիայի ընթացքում:

Աշխատում են այսպես. դուք նկարագրում եք մի շարք ոճեր որոշակի ժամանակի տոկոսների համար (օրինակ, 0%, 50%, 100%), և բրաուզերը սահուն ինտերպոլացնում է արժեքները այդ վիճակների միջև:

Օրինակ՝

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

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

Այս օրինակով, տարրն աստիճանաբար երևում է (թափանցիկությունը փոխվում է 0-ից 1) 2 վայրկյանում:

Այսպիսով, keyframes-ները թույլ են տալիս ստեղծել բարդ և հոսող անիմացիաներ՝ սահմանելով հիմնական կետերը ոճերի փոփոխության համար։