it
Średniozaawansowany
+35 XP

👋 Zacznij uczyć się JavaScript już teraz — za darmo!

Zaloguj się
📖

Przejścia i animacje CSS

transition, transform, @keyframes — ożywiamy stronę

transition — płynna zmiana stylu

transition ustawia się na elemencie i uruchamia przy każdej zmianie właściwości CSS (zwykle przez :hover).

css
.btn {
  background: #6070f7;
  transform: scale(1);

  /* transition: właściwość czas funkcja-czasowania opóźnienie */
  transition: background 0.2s ease, transform 0.2s ease;

  /* Lub dla wszystkich właściwości */
  transition: all 0.2s ease;
}

.btn:hover {
  background: #4f5fea;
  transform: scale(1.05); /* lekkie powiększenie */
}

Funkcje czasowania:

  • ease — wolno → szybko → wolno (naturalne)
  • linear — stała prędkość
  • ease-in — zaczyna wolno
  • ease-out — kończy wolno (świetne dla pojawiających się elementów)

transform — transformacja elementu

transform nie przesuwa elementu w przepływie dokumentu — to czysto wizualna zmiana. Przeglądarka może animować ją przez GPU.

css
.element {
  /* Przesunięcie */
  transform: translateX(20px);     /* w prawo */
  transform: translateY(-10px);    /* w górę */
  transform: translate(20px, -10px); /* oba */

  /* Skalowanie */
  transform: scale(1.1);           /* +10% */
  transform: scaleX(2);            /* podwójna szerokość */

  /* Obrót */
  transform: rotate(45deg);
  transform: rotate(-90deg);

  /* Pochylenie */
  transform: skewX(15deg);

  /* Kombinacja */
  transform: translateY(-4px) scale(1.02);
}

@keyframes — pełne animacje

Dla bardziej złożonych animacji, które się powtarzają lub mają wiele etapów:

css
/* Definiuj animację */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

/* Zastosuj ją */
.spinner {
  animation: spin 1s linear infinite;
}

.card {
  animation: fadeIn 0.4s ease-out forwards;
  /* forwards — pozostaje w końcowym stanie */
}
css
💬

Dokładnie ten kod jest używany w Memory Game! perspective ustawia odległość obserwatora dla efektu 3D, backface-visibility: hidden ukrywa tył gdy jest zwrócony od nas.

Animuj tylko transform i opacity — te właściwości są obsługiwane przez GPU bez przeliczania układu. Animowanie width, height, top, left jest wolne i powoduje szarpanie.

Komentarze

Zaloguj się lub Zacznij aby zostawić komentarz.