Animacje w CSS: jak sprawić, by strona była „żywa” bez JavaScriptu

Animacje sprawiają, że strona jest dynamiczna dla użytkowników. Wiele osób uważa, że do tego konieczny jest JavaScript, ale nowoczesny CSS pozwala tworzyć złożone efekty bez ani jednej linijki kodu w JS. Użycie animacji CSS przyspiesza ładowanie strony i zmniejsza obciążenie przeglądarki, ponieważ są one przyspieszane sprzętowo.

Podstawy animacji CSS

Aby stworzyć animację, należy zdefiniować kluczowe klatki za pomocą @keyframes. Na przykład, zróbmy płynne zmienianie koloru przycisku:

@keyframes changeColor {
  0% { background-color: #3498db; }
  100% { background-color: #2ecc71; }
}

button {
  animation: changeColor 2s infinite alternate;
}

Ten kod sprawia, że przycisk zmienia kolor co 2 sekundy. Animacja działa nieprzerwanie dzięki infinite, a alternate sprawia, że zmienia kierunek przy każdym powtórzeniu.

Animacja ruchu obiektów

Jednym z najczęstszych efektów jest płynne przesuwanie elementu. Na przykład, zróbmy blok, który porusza się w lewo i w prawo:

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

.moving-block {
  animation: move 3s infinite;
}

Ten efekt można zastosować do różnych elementów, aby nadać stronie dynamiki.

CSS transition: płynne zmiany stylów

Jeśli trzeba animować zmianę właściwości bez @keyframes, można użyć transition. Na przykład, zróbmy efekt najechania kursorem na przycisk:

button {
  background-color: #3498db;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: #2ecc71;
}

To podejście pozwala na bardziej przyjemną zmianę koloru bez szarpania.

Łączenie efektów

Aby uzyskać bardziej złożone efekty, można łączyć @keyframes i transition. Na przykład, stwórzmy efekt „pulsacji”:

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

.pulsing-button {
  animation: pulse 1.5s infinite;
}

W ten sposób animacje CSS pozwalają na tworzenie dynamicznych i płynnych efektów bez konieczności używania JavaScript.