Ի՞նչ են keyframes-ները և ինչպես են նրանք աշխատում:

@keyframes — CSS կանոն, որը սահմանում է անիմացիայի հիմնական կադրերը։ Այն թույլ է տալիս ստեղծել տարրի վիճակների հաջորդականություն տարբեր ժամանակային կետերում, որոնք բրաուզերը կփոխի միից մյուսը հարթ, ստեղծելով շարժման էֆեկտ։ Դա կատարվում է որոշելով ոճերի հավաքածու տարրին որոշակի ժամանակների տոկոսներում (0%-ից 100%) կամ օգտագործելով from (0%) և to (100%) բառերը։

keyframes օգտագործելու համար անհրաժեշտ է.

1. Դիտարկել @keyframes կանոն, որը ունի յուրահատուկ անուն։
2. Ներքին @keyframes-ում նշել տարբեր ժամանակային նշանների համար ոճեր (համապատասխան տոկոսներով կամ from/to)։
3. Ստեղծված անիմացիան կիրառել տարրին CSS հատկության animation միջոցով։

@keyframes slidein {
  from {
    transform: translateX(0%); // Սկզբնական վիճակ՝ առանց տեղափոխության X-ով
  }

  to {
    transform: translateX(100%); // Վերջնական վիճակ՝ տեղափոխություն 100% X-ով
  }
}

.element {
  animation-name: slidein; // Անիմացիայի անունը, որը վերևում է սահմանված
  animation-duration: 3s; // Անիմացիայի մեկ ցիկլի տևողությունը
  animation-timing-function: ease-in-out; // Անիմացիայի արագության ֆունկցիա
  animation-delay: 1s; // Ուղեկցում նախքան սկսելը
  animation-iteration-count: infinite; // Կրկնությունների թիվը
  animation-direction: alternate; // Անիմացիայի ուղղությունը
}

Հիմնական հատկություններ animation, որոնք օգտագործվում են @keyframes-ի հետ.

Գծանշան	Նկարագրություն
animation-name	@keyframes-ի անունը, որը պետք է կիրառվի։
animation-duration	Մեկ ցիկլի տևողությունը (օրինակ, 2s, 500ms)։
animation-timing-function	Անիմացիայի արագության ֆունկցիա (օրինակ, linear, ease, ease-in, cubic-bezier)։
animation-delay	Նախքան սկսելը սպասում (օրինակ, 1s)։
animation-iteration-count	Կրկնությունների թիվը (infinite՝ անսահմանափակ կրկնություն)։
animation-direction	Անիմացիայի ուղղությունը (normal, reverse, alternate, alternate-reverse)։
animation-fill-mode	Որոշում է, թե որ ոճերը կիրառվեն տարրին նախքան և հետո անիմացիան։
animation-play-state	Կարգավորում է, արդյոք անիմացիան կատարվում է կամ դադարեցված։