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 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ł jest kontynuacją wcześniej opublikowanego wpisu pod tytułem: CSS3 Preloaders – niestandardowy pasek wczytywania.

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, 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.