Animacje w CSS - teoria

Wyjaśnienie kluczowych elementów CSS związanych z animacjami

Zanim przejdziemy do zadania, omówmy szczegółowo elementy, które będziesz używał w tym zadaniu:

@keyframes – Definiowanie animacji

• Opis: @keyframes pozwala zdefiniować, jak animacja ma się zmieniać w czasie. Możesz określić różne stany animacji (np. początek, środek, koniec) i przypisać im konkretne style.
  
  

@keyframes nazwa-animacji {
from { /* stan początkowy */ }
to { /* stan końcowy */ }
}

lub:

@keyframes nazwa-animacji {
    0% { /* stan początkowy */ }
    50% { /* stan pośredni */ }
    100% { /* stan końcowy */ }
}

Przykład: Przesunięcie elementu z lewej strony na środek:

@keyframes slideIn {
from {
transform:
translateX(-100%);
}
  to { transform:
translateX(0); }
}

Uwagi: Nazwa animacji (nazwa-animacji) jest dowolna, ale musi być unikalna i później użyta w regule animation.

animation – Uruchamianie animacji

• Opis: Reguła animation pozwala przypisać animację zdefiniowaną w @keyframes do wybranego elementu. Określa też szczegóły, takie jak czas trwania, liczba powtórzeń, opóźnienie itp.
  
  

Składnia:

animation: nazwa-animacji czas-trwania [timing-function] [delay] [iteration-count] [direction] [fill-mode];

nazwa-animacji – Nazwa animacji zdefiniowanej w @keyframes.

czas-trwania – Czas trwania animacji (np. 2s – 2 sekundy, 500ms – 500 milisekund).

[timing-function] (opcjonalne) – Funkcja czasu (np. ease, linear, ease-in, ease-out), określa sposób zmiany animacji (np. czy przyspiesza, czy zwalnia).

[delay] (opcjonalne) – Opóźnienie przed startem animacji (np. 1s).

[iteration-count] (opcjonalne) – Liczba powtórzeń animacji (np. infinite dla nieskończonej pętli, 2 dla dwukrotnego wykonania).

[direction] (opcjonalne) – Kierunek animacji (np. normal, reverse, alternate).

[fill-mode] (opcjonalne) – Określa, co dzieje się z elementami przed i po animacji (np. forwards – zatrzymuje element w stanie końcowym).

Przykład: Uruchomienie animacji przesunięcia nagłówka

h1 {
animation: slideIn 1s ease-in-out forwards;
}

Tutaj animacja slideIn trwa 1 sekundę, używa funkcji czasu ease-in-out (płynne przyspieszanie i zwalnianie) i zatrzymuje się w stanie końcowym (forwards).

transform – Transformacje elementów

• Opis: Właściwość transform pozwala zmieniać wygląd elementu, np. przesuwać, obracać, skalować lub przechylać go. Jest często używana w animacjach, ponieważ zmiana wartości transform jest płynna i wydajna.
• Najczęściej używane funkcje transform:
  • translateX(wartość) – Przesunięcie w osi X (np. translateX(50px) – przesunięcie o 50 pikseli w prawo, translateX(-100%) – przesunięcie w lewo o całą szerokość elementu).
  • translateY(wartość) – Przesunięcie w osi Y.
  • scale(wartość) – Skalowanie elementu (np. scale(1.2) – powiększenie o 20%, scale(0.8) – pomniejszenie o 20%).
  • rotate(kąt) – Obrót elementu (np. rotate(45deg) – obrót o 45 stopni).

Przykład: Pulsowanie przycisku (zmiana rozmiaru):

@keyframes pulse {
    0% { transform: scale(1); }    50% { transform: scale(1.2); }    100% { transform: scale(1); }

}