Animacje CSS – jak skutecznie animować obiekty HTML, przykłady preloaderów

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ą:

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.

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

Przechodząc do praktycznych przykładów animacji CSS przedstawiono preloader, który 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 oraz dodatkowo, stałe wcześniej piksele zamieniono na jednostkę em ułatwiającą modyfikację rozmiaru preloadera. Wartości cienia w poszczególnych krokach dostosowano do potrzeb bieżącej animacji.

Przykład 9

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