Tworzenie animacji kluczowych (keyframes)

Animacje kluczowe w CSS, definiowane za pomocą reguły @keyframes, umożliwiają tworzenie złożonych efektów ruchu i zmian właściwości elementów. Dzięki kluczowym klatkom możesz zaprogramować kolejne fazy animacji – od początkowego do końcowego stanu (a nawet więcej przystanków „po drodze”).

Podstawowa składnia @keyframes

Kiedy zdefiniujesz animację za pomocą @keyframes, możesz ją zastosować do wybranego elementu, używając właściwości animation.

@keyframes nazwaAnimacji {
  0% {
    /* początkowy stan animacji */
  }
  50% {
    /* stan w połowie animacji */
  }
  100% {
    /* końcowy stan animacji */
  }
}

Przykład z jedną klatką pośrednią

Poniższy kod pokazuje, jak przesunąć element z lewej do prawej, a następnie go obrócić.

Wyjaśnienie kodu

• @keyframes slideAndRotate - definiuje klatki kluczowe w animacji.
• 0% - element startuje bez przesunięcia i bez obrotu.
• 50% - element jest przesunięty w prawo (bez obrotu).
• 100% - element jest w tej samej pozycji co w 50%, ale dodatkowo obrócony o 360 stopni.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Wielokrotne klatki kluczowe

Możesz dodać dowolną liczbę klatek pośrednich (np. 20%, 40%, 60%, 80%), aby szczegółowo opisać sposób, w jaki element ma się animować.

@keyframes complexMove {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  25% {
    transform: translate(100px, 0);
    opacity: 0.8;
  }
  50% {
    transform: translate(100px, 100px);
    opacity: 0.5;
  }
  75% {
    transform: translate(0, 100px);
    opacity: 0.8;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

Właściwości powiązane z animacjami kluczowymi

• animation-duration - czas trwania animacji, np. 2s.
• animation-timing-function - krzywa przyspieszenia, np. ease, linear, ease-in-out.
• animation-delay - opóźnienie startu animacji.
• animation-iteration-count - liczba powtórzeń, np. 1, 3, infinite.
• animation-direction - kierunek odtwarzania (normal, reverse, alternate).
• animation-fill-mode - sposób utrzymania stanu animacji przed i po zakończeniu (np. forwards, backwards).

Podsumowanie

Tworzenie animacji kluczowych w CSS daje ogromne możliwości wzbogacenia interfejsu o dynamiczne, płynne przejścia. Dzięki @keyframes możesz precyzyjnie kontrolować stany animacji w różnych momentach jej trwania. Właściwości takie jak animation-duration czy animation-iteration-count pozwalają zdefiniować, jak długo i ile razy element ma się animować, co wpływa na atrakcyjność i czytelność efektów wizualnych.