Artykuł

flickr.com/photos/themonnie flickr.com/photos/themonnie
kwi 04 2013
0

Tworzenie animacji w CSS3

Internet się zmienia. Przez zmiany nie mam na myśli tylko warstwy którą widzi klient, ale przede wszystkim tej, którą tworzą webmasterzy. Jeszcze kilka lat temu trudno było sobie wyobrazić dobrą stronę bez Flasha i grafiki zrobionej w Photoshopie. Dziś coraz częściej technologie od Adobe idą w kąt, a nowoczesne layouty tworzone są w czystym HTML5 oraz CSS3 i powstają bez użycia jakiejkolwiek dodatkowej grafiki.

Idąc dalej spójrzmy na cienie na stronach. Zawsze spoglądałem na nie z zazdrością, bo wyglądają z reguły efektownie, ale niestety osobiście nie zostałem obdarzony talentem graficznym, ani dostateczną ilością gotówki by wywalać ją na Photoshopa w ramach zachcianki. Dziś nie mam już takiego problemu, wystarczy box-shadow w CSS i sprawa załatwiona.

Podobna rewolucja ma obecnie miejsce w temacie animacji, które wcześniej na stronach pojawiały się za sprawą ociężałego Flasha, albo bardzo archaicznego już dziś GIFa. Kilka lat temu mechanizmy te w dużej mierze zastąpiono animacjami napisanymi w jQuery. Świat pędzi jednak do przodu i przyszłością w tym temacie jest CSS3!

Idea

Idea animacji tworzonych w CSS jest odrobinę inna aniżeli w przypadku tych, które dotychczas robiliśmy w jQuery. W JS z reguły ustalaliśmy docelowe reguły CSS dla interesującego nas elementu. Czyli np. dla wyjściowo niewidocznego diva, określaliśmy że po zakończeniu animacji jego właściwość display otrzyma wartość block. Nie mieliśmy wielkiej kontroli nad tym procesem, ponieważ sprowadzała się ona głównie do określenia czasu oraz rodzaju animacji (efektu przejścia).

W CSS sprawa wygląda zgoła inaczej, ponieważ tworząc animacje mamy możliwość ustalenia jej kluczowych klatek (keyframes).

Domyślnie wygląda to mniej więcej tak:

@keyframes my-anim
{
	from {background: #000;}
	to {background: #999;}
}

Ustalamy początkowy i końcowy stan elementu. Powyższy przykład możemy zapisać również inaczej:

@keyframes my-anim
{
	0% {background: #000;}
	100% {background: #999;}
}

Oba rozwiązania są tożsame. To nie jest jednak koniec możliwości animacji, ponieważ w CSS możemy ustalać więcej punktów kluczowych naszej animacji. Poniższe rozwiązanie jest jak najbardziej poprawne:

@keyframes div-anim
{
	0% {background: #000;}
	40% {width: 400px;}
	70% {height: 200px;}
	100% {background: #999;}
}

Powyższy kod to jednak tylko połowa sukcesu. Utworzyliśmy kluczowe klatki animacji, jednak musi ona zostać przypisana do jakiegoś elementu. Dobra nowina jest taka, że raz zdefiniowaną animację możemy zastosować dla wszelakiej maści różnych znaczników. Spójrzcie jak prosto przypisać animację do przykładowego diva:

#test-div{
	width: 200px;
	height: 100px;
	background: #000;
	animation: div-anim 8s;
}

Z pewnością zauważyliście nową właściwość animation;-)? Po dwukropku podajemy nazwę animacji oraz czas jej wykonywania liczony w sekundach. Domyślnie animacja wystartuje po załadowaniu się strony. Pozostałe właściwości CSS są ważne, ponieważ opisują one wygląd elementu przed i po animacji.

Przykład

Powyższy przykład nie za działa obecnie chyba w żadnej przeglądarce, ponieważ animacje wciąż traktowane są bardziej eksperymentalnie. Dlatego też konieczne będzie zastosowanie odpowiednich przedrostków charakterystycznych dla silników przeglądarek:

  • -webkit- Chrome i Safari
  • -moz- Firefox
  • -o- Opera
  • -ms- Internet Explorer 10

Niestety Microsoft jest jak zwykle do tyłu, więc animacje zadziałają tylko w najnowszej wersji przeglądarki giganta z Redmond. Spójrzmy na całkowity (odrobinę długi) przykład praktyczny:

<!DOCTYPE html>
<html lang="pl">
	<head>
		<meta charset="utf-8" />
		<style>
			@keyframes div-anim
			{
				0% {background: #000;}
				40% {width: 400px;}
				70% {height: 200px;}
				100% {background: #999;}
			}
			
			@-webkit-keyframes div-anim
			{
				0% {background: #000;}
				40% {width: 400px;}
				70% {height: 200px;}
				100% {background: #999;}
			}
			
			@-moz-keyframes div-anim
			{
				0% {background: #000;}
				40% {width: 400px;}
				70% {height: 200px;}
				100% {background: #999;}
			}
			
			@-o-keyframes div-anim
			{
				0% {background: #000;}
				40% {width: 400px;}
				70% {height: 200px;}
				100% {background: #999;}
			}
			
			@-ms-keyframes div-anim
			{
				0% {background: #000;}
				40% {width: 400px;}
				70% {height: 200px;}
				100% {background: #999;}
			}
			
			#test-div{
				width: 200px;
				height: 100px;
				background: #999;
				animation: div-anim 8s;
				-webkit-animation: div-anim 8s;
				-moz-animation: div-anim 8s;
				-o-animation: div-anim 8s;
				-ms-animation: div-anim 8s;
			}
		</style>
	</head>
	<body>
		<div id="test-div"></div>
	</body>
</html>

Jak widać, kod wspierający wszystkie nowe przeglądarki, jest delikatnie mówiąc dłuuugi. Z jQuery załatwimy to kilkoma linijkami. Problemem jest również oczywiście wsparcie. IE tylko od wersji 10 to wciąż spore ograniczenie na rynku (w ramach ciekawostki, na Alt Control Delete IE10 ma wciąż tylko 18% udział w grupie przeglądarek od Microsoftu).

Animacje CSS na razie mają także dość ograniczone opcje (domyślne uruchamianie przy starcie itp.), choć z drugiej strony można przy ich pomocy zrobić ciekawy efekt hover odrobinę modyfikując powyższy kod:

#test-div{
	width: 200px;
	height: 100px;
	background: #999;
}

#test-div:hover{
	animation: div-anim 8s;
	-webkit-animation: div-anim 8s;
	-moz-animation: div-anim 8s;
	-o-animation: div-anim 8s;
	-ms-animation: div-anim 8s;
}

Przykład tej animacji możecie sprawdzić tutaj.

Wsparcie i obejścia

Tak jak napisałem wcześniej, technika animacji ma jeszcze stosunkowo słabe wsparcie. Dlatego też jeśli robisz poważną witrynę, to albo musisz przygotować obejścia, albo z góry wybrać animację JS/jQuery.

W przypadku próby znalezienia obejścia, przydatny będzie opisywany przeze mnie wcześniej Modernizr, który wykrywa obsługę animacji CSS. W przypadku jej braku i tak będziemy musieli napisać prawdopodobnie jakiś kod jQuery.

Można by sobie teraz zadać pytanie - po jakiego licha pchać się w te animacje? Odpowiedź jest stosunkowo prosta - WYDAJNOŚĆ.

Animacje CSS obsługiwane są przez algorytmy przeglądarki, które przeważnie napisane są C++, więc najogólniej mówiąc są szybkie i wydajne. jQuery mimo całej swej fajności, to wciąż JS - warto o tym pamiętać, zanim przyozdobicie swoją stronę niczym choinkę na Boże Narodzenie.

P.S W przypadku zainteresowania tematem, w następnym tekście opowiem o CSS Transitions, które dają jeszcze bardziej efekciarskie możliwości;-)

Data ostatniej modyfikacji: 04.06.2013, 12:35.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus