Podstawy animacji CSS (transition, animation)

Animacje w CSS pozwalają na atrakcyjne wizualne przejścia oraz efekty ruchu na stronach internetowych, bez konieczności stosowania JavaScript. Istnieją dwa podstawowe narzędzia do tworzenia animacji w CSS: transition (płynne przejścia między dwoma stanami) oraz animation (bardziej złożone animacje z wieloma krokami).

Transition – płynne przejścia

Transition umożliwia płynne przejście pomiędzy dwiema wartościami właściwości CSS, na przykład przy najechaniu kursorem na element. Składnia:

• property - nazwa właściwości, którą chcemy animować (np. background-color, width).
• duration - czas trwania efektu (np. 0.5s).
• timing-function - funkcja określająca krzywą przyspieszenia (np. ease, linear, ease-in-out).
• delay - czas opóźnienia startu (opcjonalnie).

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

Animation – wieloetapowe animacje

Animation pozwala tworzyć bardziej złożone animacje. Składa się z dwóch kluczowych elementów:

• @keyframes - zdefiniowanie klatek (stanów) animacji.
• animation - przypisanie animacji do danego selektora.

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

Pozostałe właściwości animacji

• animation-duration - czas trwania animacji (np. 2s).
• animation-timing-function - funkcja przyspieszenia (np. ease, linear).
• animation-delay - opóźnienie startu animacji.
• animation-iteration-count - liczba powtórzeń animacji (np. 1, 3, infinite).
• animation-direction - kierunek odtwarzania (np. normal, reverse, alternate).

Podsumowanie

Transition świetnie sprawdza się w sytuacjach, gdzie chcemy uzyskać płynne przejście między dwoma stanami (np. przed/po najechaniu kursorem). Animation natomiast pozwala tworzyć bardziej złożone i wieloetapowe efekty zdefiniowane w kluczowych klatkach (@keyframes). Dzięki tym narzędziom w CSS możesz wzbogacać swoje strony o płynne efekty wizualne, poprawiając interakcję i doświadczenie użytkownika.