Kurs HTML

Czym są Animacje CSS?

Animacje CSS pozwalają na tworzenie bardziej złożonych i kontrolowanych sekwencji zmian stylów niż przejścia (transitions). Podczas gdy przejścia animują zmianę właściwości między dwoma stanami (początkowym i końcowym), animacje pozwalają zdefiniować **wiele stanów pośrednich**, zwanych **klatkami kluczowymi (keyframes)**, przez które element ma przejść w trakcie animacji.

Animacje definiuje się za pomocą reguły @keyframes oraz stosuje do elementów za pomocą właściwości z rodziny animation-*.

Podstawowa koncepcja: @keyframes i animation

Tworzenie animacji CSS składa się z dwóch głównych kroków:

1. Definicja animacji (@keyframes): Tworzymy regułę @keyframes, nadajemy jej unikalną nazwę i definiujemy w niej style dla poszczególnych klatek kluczowych (etapów) animacji. Klatki kluczowe określa się za pomocą procentów (od 0% do 100%) lub słów kluczowych from (odpowiednik 0%) i to (odpowiednik 100%).
2. Zastosowanie animacji (właściwości animation-*): Do elementu, który ma być animowany, dodajemy właściwości z rodziny animation, aby powiązać go z definicją @keyframes i określić parametry animacji, takie jak czas trwania, liczba powtórzeń, kierunek, opóźnienie itp.

Przykład prostej animacji zmiany koloru:

/* 1. Definicja animacji o nazwie 'zmianaKoloru' */
@keyframes zmianaKoloru {
  from { /* Stan początkowy (0%) */
    background-color: blue;
  }
  to { /* Stan końcowy (100%) */
    background-color: red;
  }
}

/* 2. Zastosowanie animacji do elementu */
.element {
  width: 100px;
  height: 100px;
  /* Powiązanie z @keyframes 'zmianaKoloru' */
  animation-name: zmianaKoloru;
  /* Czas trwania jednego cyklu animacji */
  animation-duration: 2s; 
  /* Można dodać inne właściwości animation-*, np. liczbę powtórzeń */
  animation-iteration-count: infinite; /* Powtarzaj w nieskończoność */
  animation-direction: alternate; /* Zmieniaj kierunek w każdym cyklu */
}
Kopiuj

W tym przykładzie tło elementu .element będzie płynnie zmieniać się z niebieskiego na czerwony przez 2 sekundy, a następnie z czerwonego na niebieski (dzięki alternate) i tak w nieskończoność (dzięki infinite).

Animacje vs. Przejścia (Transitions)

Chociaż oba mechanizmy służą do animowania zmian stylów, istnieją kluczowe różnice:

Generalnie, **przejścia** są idealne do prostych animacji interakcji (np. efekty hover), podczas gdy **animacje** dają większą kontrolę i nadają się do tworzenia bardziej złożonych, powtarzalnych lub niezależnych od interakcji sekwencji.