Animacje i przejścia w CSS

Animacje w CSS pozwalają nadać stronie płynność i dynamikę – od prostych efektów przejścia po złożone animacje z wieloma etapami. Wyróżniamy trzy główne mechanizmy:

• Przejścia (transition) – płynne zmiany wartości właściwości.
• Animacje kluczowe (@keyframes) – sekwencje kroków animacji.
• Transformacje (transform) – przekształcenia elementów (obrót, skalowanie, przesunięcie).

1. Przejścia (transition)

Przejścia definiują, jak płynnie ma zmieniać się właściwość elementu, np. kolor, rozmiar, położenie. Działają one w momencie, gdy wartość właściwości ulegnie zmianie (np. na hover).

Składnia

• property – która właściwość ma się animować (color, background, all),
• duration – czas trwania (np. 0.5s),
• timing-function – sposób przebiegu animacji:
• linear – równomiernie,
• ease – wolno → szybko → wolno (domyślne),
• ease-in – wolny początek,
• ease-out – wolny koniec,
• ease-in-out – wolny początek i koniec,
• cubic-bezier(n,n,n,n) – własna krzywa.
• delay – opóźnienie przed startem (np. 0.3s).

Przykład

Kolor i skala zmieniają się płynnie po najechaniu.

2. Animacje kluczowe – @keyframes

Animacje pozwalają tworzyć bardziej złożone sekwencje niż przejścia. Definiujemy je za pomocą klatek kluczowych (keyframes).

Składnia

Właściwości animacji:

• animation-name – nazwa animacji,
• animation-duration – czas trwania,
• animation-timing-function – sposób przebiegu (ease, linear itd.),
• animation-delay – opóźnienie,
• animation-iteration-count – liczba powtórzeń (1, infinite),
• animation-direction – kierunek:
• normal (domyślne),
• reverse (od końca do początku),
• alternate (na przemian w przód i w tył).
• animation-fill-mode – styl elementu poza czasem trwania animacji:
• none,
• forwards (pozostaje w stanie końcowym),
• backwards (przyjmuje styl początkowy w czasie opóźnienia),
• both (łączy oba).

Przykład

Element płynnie „wjeżdża” i staje się widoczny.

3. Transformacje – transform

Transformacje zmieniają wygląd i położenie elementu bez wpływu na inne elementy strony (działają w kontekście własnym).

Główne funkcje:

• translate(x, y) – przesunięcie:

• scale(x, y) – skalowanie:

• rotate(deg) – obrót w stopniach:

• skew(x, y) – pochylanie:

• matrix() – kombinacja wszystkich powyższych w jednej funkcji.

Można je łączyć:

4. Praktyczne przykłady

a) Efekt hover – powiększenie

b) Pulsujący przycisk

c) Obracające się koło

d) Animacja wjazdu elementu