Kurs HTML

animation-name: Powiązanie z @keyframes

Właściwość animation-name jest **niezbędna** do zastosowania zdefiniowanej animacji @keyframes do elementu. Jej wartością jest nazwa (lub nazwy oddzielone przecinkami) reguły @keyframes, którą chcemy uruchomić na tym elemencie.

Bez podania animation-name, przeglądarka nie wie, którą sekwencję klatek kluczowych ma odtworzyć, więc żadna animacja się nie odbędzie.

Składnia:

animation-name: none | <nazwa-keyframes> [, <nazwa-keyframes>]*;

• none (wartość domyślna): Brak animacji.
• <nazwa-keyframes>: Nazwa zdefiniowana w regule @keyframes nazwa-keyframes { ... }. Nazwa jest wrażliwa na wielkość liter.
• Lista nazw: Można przypisać wiele animacji do jednego elementu, podając ich nazwy oddzielone przecinkami. Każda animacja będzie działać zgodnie ze swoimi parametrami (czasem trwania, funkcją czasową itd.).

Przykład:

/* Definicje animacji */
@keyframes pulsowanie {
  50% { opacity: 0.5; }
}

@keyframes przesuwanie {
  to { transform: translateX(100px); }
}

/* Zastosowanie animacji */
.element1 {
  /* Użyj animacji o nazwie 'pulsowanie' */
  animation-name: pulsowanie;
  animation-duration: 1s;
}

.element2 {
  /* Użyj obu animacji jednocześnie */
  animation-name: pulsowanie, przesuwanie;
  /* Czasy trwania dla obu animacji (kolejność odpowiada nazwom) */
  animation-duration: 1s, 2s;
}

animation-duration: Czas trwania animacji

Właściwość animation-duration określa **czas potrzebny na ukończenie jednego cyklu animacji**. Podobnie jak transition-duration, jest to kluczowy parametr - bez niego (lub z wartością 0s) animacja nie będzie widoczna.

Składnia:

animation-duration: <czas> [, <czas>]*;

• <czas>: Wartość czasu, **nieujemna**. Używane jednostki to sekundy (s) i milisekundy (ms).

Wartość domyślna: 0s (brak animacji).

Przykład:

@keyframes powiekszanie {
  to { transform: scale(1.5); }
}

.element1 {
  animation-name: powiekszanie;
  /* Jeden cykl animacji potrwa 3 sekundy */
  animation-duration: 3s;
}

.element2 {
  animation-name: pulsowanie, przesuwanie; /* Z poprzedniego przykładu */
  /* 'pulsowanie' trwa 500ms, 'przesuwanie' trwa 1.5s */
  animation-duration: 500ms, 1.5s;
}

Jeśli lista czasów trwania jest krótsza niż lista nazw animacji w animation-name, wartości czasów są powtarzane cyklicznie.

Współpraca animation-name i animation-duration

Te dwie właściwości są fundamentalne i muszą być zdefiniowane (z wartościami innymi niż domyślne), aby jakakolwiek animacja CSS mogła się odbyć. animation-name mówi *co* animować, a animation-duration mówi *jak długo* ma trwać jeden cykl tej animacji.

W kolejnych lekcjach poznamy inne właściwości z rodziny animation-*, które pozwalają dalej dostosowywać zachowanie animacji (np. funkcję czasową, opóźnienie, liczbę powtórzeń).