რა მიზნით არის საჭირო 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	განსაზღვრავს, მიმდინარეობს თუ არა ანიმაცია ან პაუზაზეა.