Zaawansowane animacje z @keyframes

Proste przejścia (transition) są świetne do animowania zmian między dwoma stanami – np. po najechaniu kursorem. Ale co jeśli chcesz, aby element sam się animował, poruszał, znikał, pulsował lub np. kręcił się w nieskończoność?

Właśnie do tego służy @keyframes – mechanizm w CSS, który pozwala tworzyć pełne sekwencje animacji. Działa on jak „plan ruchu”, który CSS realizuje krok po kroku.

Jak działa @keyframes?

Najpierw definiujesz „scenariusz animacji” – czyli zestaw stanów w czasie – a potem przypisujesz go do elementu za pomocą właściwości animation.

Najprostszy przykład

@keyframes slideRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background: #4caf50;
  animation: slideRight 1s ease-in-out;
}

Efekt działania: element .box przesuwa się w prawo o 100px w czasie 1 sekundy.

Składnia właściwości `animation`

animation: [nazwa] [czas trwania] [funkcja timingowa] [opóźnienie] [ilość powtórzeń] [kierunek] [fill-mode];

Przykład:

animation: bounce 2s ease-in-out 0s infinite alternate both;

nazwa: odnosi się do @keyframes
czas: ile trwa animacja
funkcja: sposób rozpoczęcia/zakończenia (ease, linear, ease-in-out)
opóźnienie: kiedy animacja ma się zacząć
ilość powtórzeń: np. 1, infinite
kierunek: normal, alternate, reverse
fill-mode: none, forwards, backwards, both

Przykład 2 – animacja pulsowania

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

.pulse-button {
  background: #e91e63;
  color: white;
  padding: 16px 32px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  animation: pulse 1.5s infinite ease-in-out;
}

Efekt działania: przycisk pulsuje delikatnie bez interakcji – przyciągając uwagę użytkownika.

Przykład 3 – obracanie się elementu

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader {
  width: 50px;
  height: 50px;
  border: 6px solid #ccc;
  border-top: 6px solid #2196f3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

Efekt działania: element .loader obraca się w nieskończoność – typowy efekt ładowania.

Przetestuj sam w JSFiddle

👉 Otwórz JSFiddle i sprawdź efekty działania animacji

<style>
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  background: #ffffff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  animation: fadeIn 1s ease forwards;
}
</style>

<div class="card">
  Pojawiam się z animacją fadeIn!
</div>

Dobre praktyki w animacjach z @keyframes

Nie przesadzaj – animacje mają wspierać interakcję, nie ją dominować.
Używaj forwards lub both, jeśli chcesz, by element zachował ostatni stan animacji.
Testuj płynność – zbyt gwałtowne zmiany mogą wyglądać „nerwowo”.
Dostosuj funkcję ease – czasem warto użyć ease-in-out lub linear dla bardziej naturalnego efektu.

Podsumowanie

@keyframes pozwala tworzyć sekwencje animacji – to jak własny film dla elementu.
animation kontroluje, jak, kiedy i ile razy dana animacja ma być odtwarzana.
Możesz animować ruch, przezroczystość, przekształcenia i wiele więcej.
To potężne narzędzie do tworzenia dynamicznych, nowoczesnych efektów bez JavaScriptu.

W kolejnej części przygotujesz quiz, który pomoże Ci utrwalić wiedzę o przejściach i animacjach CSS. Ale zanim to zrobisz – możesz pobawić się dowolnym z przykładów i spróbować stworzyć własny efekt!

Previous Temat

Back to Zagadnienie

Next Quiz

Zaawansowane animacje z @keyframes