Kurs HTML

Do czego służy skrót animation?

Właściwość skrócona animation pozwala na zwięzłe zdefiniowanie wszystkich lub wybranych indywidualnych właściwości animacji (animation-*) w jednej deklaracji. Upraszcza to kod CSS i czyni go bardziej czytelnym, zwłaszcza gdy stosujemy wiele parametrów do jednej animacji.

Składnia

Składnia skrótu animation pozwala na podanie wartości dla poszczególnych właściwości w określonej kolejności. Wiele wartości można pominąć, a przeglądarka użyje ich wartości domyślnych.

/* Składnia dla pojedynczej animacji */
animation: [animation-duration] || [animation-timing-function] || [animation-delay] || [animation-iteration-count] || [animation-direction] || [animation-fill-mode] || [animation-play-state] || [animation-name];

/* Składnia dla wielu animacji (oddzielone przecinkami) */
animation: <pojedyncza-animacja> [, <pojedyncza-animacja>]*;
Kopiuj

Kluczowe zasady:

• Kolejność: Chociaż specyfikacja pozwala na pewną elastyczność, zaleca się trzymanie ustalonej kolejności dla czytelności. Najważniejsze jest, aby wartości czasu (dla duration i delay) były rozróżnialne.
• Wartości czasu: Jeśli podano **dwie** wartości czasu, pierwsza jest interpretowana jako animation-duration, a druga jako animation-delay. Jeśli podano **jedną** wartość czasu, jest ona interpretowana jako animation-duration, a animation-delay przyjmuje wartość domyślną 0s.
• animation-name: Nazwa animacji (z @keyframes) jest zazwyczaj podawana jako ostatnia lub pierwsza dla lepszej czytelności.
• Wartości domyślne: Jeśli jakaś wartość zostanie pominięta, przyjmuje swoją wartość domyślną (np. duration: 0s, timing-function: ease, delay: 0s, iteration-count: 1, direction: normal, fill-mode: none, play-state: running, name: none).
• Wymagane wartości: Aby animacja była widoczna, przynajmniej animation-duration musi być ustawione na wartość większą niż 0s, a animation-name musi wskazywać na istniejącą regułę @keyframes.

Przykłady:

@keyframes pulsowanie {
  50% { transform: scale(1.1); }
}

@keyframes przesuwanie {
  to { left: 100px; }
}

/* Przykład 1: Podstawowa animacja */
.element1 {
  /* duration: 2s, name: pulsowanie (reszta domyślna) */
  animation: 2s pulsowanie;
}

/* Przykład 2: Animacja z opóźnieniem i powtórzeniami */
.element2 {
  /* duration: 1s, delay: 0.5s, iteration-count: infinite, name: pulsowanie */
  animation: 1s 0.5s infinite pulsowanie;
}

/* Przykład 3: Animacja z funkcją czasową i kierunkiem */
.element3 {
  /* duration: 3s, timing-function: ease-in-out, direction: alternate, name: pulsowanie */
  animation: 3s ease-in-out alternate pulsowanie;
}

/* Przykład 4: Dwie animacje jednocześnie */
.element4 {
  position: relative;
  /* Animacja 1: pulsowanie, 1s, nieskończone, naprzemiennie */
  /* Animacja 2: przesuwanie, 2s, liniowo, 3 razy, z opóźnieniem 0.2s */
  animation: 
    1s infinite alternate pulsowanie, 
    2s linear 0.2s 3 przesuwanie;
}

/* Przykład 5: Pełna definicja (rzadko potrzebna) */
.element5 {
  animation: 3s ease-in 1s 2 reverse both paused nazwaAnimacji;
  /* duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
}
Kopiuj

Zalety używania skrótu

• Zwięzłość: Znacząco redukuje ilość kodu CSS potrzebnego do zdefiniowania animacji.
• Czytelność: Gdy używany konsekwentnie, może ułatwić szybkie zrozumienie parametrów animacji.
• Standard branżowy: Jest powszechnie stosowany w projektach i frameworkach CSS.

Wadą może być konieczność pamiętania o kolejności wartości, zwłaszcza czasów trwania i opóźnienia, oraz potencjalne trudności w debugowaniu, jeśli któraś wartość jest nieprawidłowa.