Do czego służą klatki kluczowe i jak działają?

@keyframes — reguła CSS definiująca kluczowe klatki animacji. Pozwala na utworzenie sekwencji stanów elementu w różnych momentach czasu, które przeglądarka będzie płynnie interpolować, tworząc efekt ruchu. Działa poprzez zdefiniowanie zestawu stylów dla elementu w określonych procentach czasu (od 0% do 100%) lub przy użyciu słów kluczowych from (0%) i to (100%).

Aby użyć keyframes, należy:

1. Zdefiniować regułę @keyframes z unikalną nazwą.
2. Wewnątrz @keyframes określić style dla różnych punktów czasowych (w procentach lub from/to).
3. Zastosować utworzoną animację do elementu za pomocą właściwości CSS animation.

@keyframes slidein {
  from {
    transform: translateX(0%); // Stan początkowy: brak przesunięcia w osi X
  }

  to {
    transform: translateX(100%); // Stan końcowy: przesunięcie o 100% w osi X
  }
}

.element {
  animation-name: slidein; // Nazwa animacji zdefiniowana powyżej
  animation-duration: 3s; // Czas trwania animacji
  animation-timing-function: ease-in-out; // Funkcja prędkości animacji
  animation-delay: 1s; // Opóźnienie przed rozpoczęciem animacji
  animation-iteration-count: infinite; // Liczba powtórzeń (tutaj nieskończoność)
  animation-direction: alternate; // Kierunek animacji (naprzemiennie, normalny i odwrotny)
}

Główne właściwości animation, używane razem z @keyframes:

Właściwość	Opis
animation-name	Nazwa @keyframes, które mają zostać zastosowane.
animation-duration	Czas trwania jednego cyklu animacji (np. 2s, 500ms).
animation-timing-function	Funkcja prędkości animacji (np. linear, ease, ease-in, cubic-bezier).
animation-delay	Opóźnienie przed rozpoczęciem animacji (np. 1s).
animation-iteration-count	Liczba powtórzeń animacji (infinite dla nieskończonego powtarzania).
animation-direction	Kierunek animacji (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Określa, które style są stosowane do elementu przed i po animacji.
animation-play-state	Określa, czy animacja jest w trakcie czy wstrzymana.