Animacje CSS

Animacje CSS zostały wprowadzone w trzeciej wersji języka kaskadowych arkuszy stylów i są wspierane przez przeglądarki od następujących wersji:

  • Google Chrome 4.0 (do wersji 43.0 wymagany przedrostek -webkit-)
  • Mozilla Firefox 5.0 (do wersji 16.0 wymagany przedrostek -moz-)
  • Opera 12.0 (do wersji 15.0 wymagany przedrostek -o-, do wersji 30.0 wymagany przedrostek -webkit-)
  • Internet Explorer 10.0
  • Microsoft Edge
  • Safari 4.0 (do wersji 9.0 wymagany przedrostek -webkit-)

Animacje CSS wywołuje się za pomocą funkcji animation, której zadaniem jest zmiana właściwości animowanego obiektu. Podstawowa składnia funkcji to:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Poszczególne parametry funkcji określają:

name (keyframename | none | initial | inherit)

Identyfikator funkcji, która ma zostać wywołana po uruchomieniu animacji.

duration (time | initial | inherit)

Czas trwania pojedynczego, pełnego cyku animacji.

timing-function (linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n) | initial | inherit)

Funkcja określająca szybkość animacji w poszczególnych jej krokach, na przykład:

  • linear – stała prędkość podczas całej animacji,
  • ease – wolne rozpoczęcie, następnie przyspieszenie i zwolnienie przed końcem animacji,
  • ease-in – powolne rozpoczęcie, szybkie zakończenie,
  • ease-out – szybkie rozpoczęcie, powolne zakończenie,
  • ease-in-out – wolne rozpoczęcie i zakończenie, szybki środek animacji,

delay (time | initial | inherit)

Opóźnienie – czas, jaki musi upłynąć przed rozpoczęciem animacji.

iteration-count (number | infinite | initial | inherit)

Liczba określająca ile razy animacja ma się wykonać.

direction (normal | reverse | alternate | alternate-reverse | initial | inherit)

Sposób wykonania animacji, na przykład:

  • normal – standardowo- od początku do końca,
  • reverse – odwrotnie- od końca do początku,
  • alternate – naprzemiennie- od początku do końca, a potem od końca do początku,
  • alternate-reverse – naprzemiennie odwrotnie- od końca do początku, a potem od początku do końca.

fill-mode (none | forwards | backwards | both | initial | inherit)

Parametr określa, co ma się stać z animacją, gdy zostanie ona ukończona, na przykład:

  • backwards – ma wrócić do stanu początkowego,
  • forwards – ma przejść do stanu, w którym się zakończyła.

play-state (paused | running | initial | inherit)

Parametr definiuje aktualny stan animacji, na przykład:

  • running – działająca,
  • paused – wstrzymana.

Dla tak przygotowanej właściwości animation należy zdefiniować funkcję @keyframes name, która będzie określać stan obiektu w poszczególnych krokach animacji. Na przykład:

@keyframes rainbow {

	0% {
		background-color: red;
	}
	10% {
		background-color: orange;
	}
	20% {
		background-color: yellow;
	}
	30% {
		background-color: lime;
	}
	40% {
		background-color: green;
	}
	50% {
		background-color: cyan;
	}
	60% {
		background-color: blue;
	}
	70% {
		background-color: purple;
	}
	80% {
		background-color: violet;
	}
	90% {
		background-color: pink;
	}
	100% {
		background-color: red;
	}

}

Przedstawiona powyżej funkcja animacji będzie zmieniać tło wskazanego obiektu w kolejnych jednostkach czasu przedstawionych w procentach.

Bieżący artykuł „Animacje CSS – jak skutecznie animować obiekty HTML” jest kontynuacją wcześniej opublikowanego wpisu pod tytułem: CSS3 Preloaders – niestandardowy pasek ładowania imitujący wczytywanie strony internetowej.

Poniżej przedstawiono przykłady wykorzystania animacji CSS na stronach internetowych w postaci preloaderów, czyli animacji symulujących wczytywanie się strony internetowej.

Przykład 7

Poniższy preloader, wykorzystując zmianę właściwości box-shadow obiektu, imituje proces wczytywania się strony internetowej.

Przykład 8

Bazując na poprzednim przykładzie, do animacji dodano transformację transform: rotate(angle) obracającą obiekt wokół własnej osi. Wartości cienia w poszczególnych krokach dostosowano do potrzeb bieżącej animacji.

W tym przykładzie stałą jednostkę px (piksele) zamieniono na jednostkę zależną em. Korzystanie z jednostek zależnych jest dużo praktyczniejsze, gdyż jej rozmiar jest uwarunkowany od rozmiaru elementu nadrzędnego. Oznacza to, że wystarczy zmienić rozmiar elementu nadrzędnego, a cały obiekt proporcjonalnie zmieni swoją wielkość. Nie trzeba więc modyfikować i obliczać ręcznie każdej wartości. Zrobi to przeglądarka za programistę. Zaawansowany programista zawsze gdzie tylko może, to stosuje rozmiary zależne. Jeśli nie czujesz się jeszcze na siłach, to korzystaj z wartości stałych takich, jak piksele. Z biegiem czasu nauczysz się korzystać z rozwiązań alternatywnych.

Przykład 9

W ostatnim przykładzie do animacji wykorzystano selektory :before i :afeter oraz dodano opóźnienie animation-delay, które powoduje nierównomierne zmiany właściwości obiektu.