Podstawy animacji w CSS3

Jako twórcy stron i aplikacji internetowych nie jesteśmy specjalistami od jednej technologii. Musimy poznać ich cały stos, co utrudnia proces uczenia się i zwiększa złożoność projektów. Spośród wszystkich narzędzi, zawsze na później odwlekałem naukę JavaScriptu. Choć dzięki podstawowej znajomości języka mogę wzbogacać interfejs, to jednak czasem lubię nacieszyć oko ciekawym efektem i zazdroszczę tym, którzy mieli czas i chęci, by opanować tę technologię. Teraz mam kolejny powód, by odłożyć dokumentację na później.

Pliki, które zostały wykorzystane w artykule znajdziecie w specjalnie przygotowanej paczce > Pobierz.

Właściwość animation i reguła @keyframes

Dzięki CSS3 możemy ożywić nasze strony bez znajomości programowania. Animacja polega na płynnej zmianie stylu elementu. Jeżeli potrafimy rozmieszczać elementy, potrafimy je także przemieszczać. Cztery podstawowe właściwości, które pozwolą nam zacząć przygodę z animacjami to:

• animation-name  – nazwa reguły @keyframes , która ma być wykorzystana do animacji elementu,
• animation-duration  – czas trwania animacji,
• animation-timing-function  – określa, w jaki sposób animacja przechodzi przez klatki kluczowe,
• animation-iteration-count  – liczba powtórzeń animacji.

Najważniejszym elementem jest reguła @keyframes . To w niej określamy nazwę animacji oraz zachowanie elementu. Najprostsza postać reguły pozwala określić stan początkowy oraz końcowy:

Rozmieszczenie klatek kluczowych można także określić procentowo:

Efekt paralaksy

Obiekty znajdujące się dalej od oglądającego wyglądają, jakby poruszały się wolniej. Efekt ten zastosujemy do trzech obrazów tła. Aby rozciągnąć tło na całą szerokość dokumentu, wykorzystamy elementy: html, body oraz pusty div. Podstawowa struktura dokumentu w HTML5 wygląda następująco:

Rozciągnięcie elementów na cały rozmiar dokumentu w pliku style.css:

Właściwość background pozwala na skalowanie obrazu, dzięki czemu możemy wykorzystać tylko jeden plik tła. Wymiary obrazu są podane w osobnym wierszu, w przeciwnym wypadku zapis skrócony nie zadziała w przeglądarce Firefox:

Uzyskany w ten sposób efekt, to trzy rzędy nakładających się na siebie chmur, powtarzających się w poziomie. Czas trwania animacji powinien różnić się w zależności od położenia.

Dla elementu html będzie on największy, a dla div najmniejszy:

Powyższe reguły animation określają kolejno: czas animacji, ilość powtórzeń (nieskończoność), nazwę oraz funkcję czasu. Liniowa (linear) funkcja czasu oznacza, że animacja nie zwalnia, ani nie przyspiesza.

Uwaga! Do reguły animation należy stosować przedrostki (-webkit dla Chrome i Safari, -moz dla Firefox, -o dla Opery). Jeżeli chcesz uruchomić animację w przeglądarce Firefox zamiast “animation” napisz “-moz-animation”. Jeżeli animacja ma działać we wszystkich przeglądarkach należy wymienić kolejno wszystkie reguły z przedrostkami, a na końcu regułę bez przedrostków. Aby artykuł nie był zbyt rozwlekły, będę pomijać przedrostki, należy jednak o nich pamiętać, ponieważ bez nich animacje nie będą działać (przynajmniej w chwili powstawania artykułu).

Animacja jest bardzo prosta i wymaga jedynie dwóch klatek kluczowych. W pierwszej tło jest wyrównane do lewej krawędzi ekranu, a w ostatniej jest przesunięte o szerokość obrazu tła. Ponieważ animacja powtarza się w nieskończoność, a tło powtarza się w poziomie, uzyskamy efekt ciągłego ruchu. Należy pamiętać o podaniu wysokości podczas definiowania pozycji. Teraz wystarczy nauczyć chmury zmieniać swoje położenie:

Reguła @keyframes  również wymaga podawania przedrostków (np. @-webkit-keyframes) do poprawnego działania.

Przemieszczanie obiektu

W celu ożywienia sceny dodamy pierwszoplanowego bohatera. Będzie nim sowa, której wygląd zainspirowany został przez latające stworzenia w starej grze Creatures (polecam). Wprowadźmy bohatera na scenę:

Umieśćmy sowę na środku ekranu. Przy pozycjonowaniu należy uwzględnić rozmiary obrazu. Wymiary pliku to 160×160 pikseli. Aby obraz znalazł się na środku, należy przesunąć margines o 80 pikseli w górę i w lewo. Przy okazji zdefiniujemy podstawowe parametry animacji:

Początkowo sowa znajdować się będzie na środku ekranu, następnie zbliży się do jego prawej krawędzi, odleci od widza i wróci z lewej strony. Z punktu widzenia obserwatora, będzie się ona poruszać po brzegach trójkąta równobocznego i zmniejszać przy jednym z wierzchołków (oddalenie).

Aby ruch był płynny wykorzystamy trzy wartości funkcji czasu:

• ease – początkowe przyspieszenie oraz zwolnienie przy końcu animacji,
• ease-in – ruch przyspieszony,
• ease-out – ruch opóźniony.

Określając funkcję czasu, należy wziąć pod uwagę fakt, że ruch zaczyna się na środku ekranu. Kiedy sowa wróci w to samo miejsce nie powinna zwalniać, ani przyspieszać, a płynnie przelecieć od lewej do prawej krawędzi ekranu. Ustawimy więc wartości animation-timing-function  na ease-out  w pierwszej, oraz ease-in  w przedostatniej klatce kluczowej. Pozostałe klatki będą mieć ustawioną wartość ease . Położenie określimy używając wartości procentowych, aby uniezależnić się od rozmiarów okna przeglądarki:

Wsparcie przeglądarek

Obecnie animacje nie działają w przeglądarce Internet Explorer, a w pozostałych wymagają podawania przedrostków przed właściwościami. Wykorzystując animacje w projektach wystarczy zwrócić uwagę na początkowy stan animowanych obiektów. W starszych przeglądarkach obrazy wyświetlą się prawidłowo, a sowa latać będzie na środku ekranu, ponieważ animacje zostaną zignorowane.

Podsumowanie

Ożywianie obiektów na stronach internetowych to świetna zabawa, pamiętajmy jednak, aby nie nadużywać animacji w projektach. Niech treść, dostępność i użyteczność zawsze będą najważniejsze. Zachęcam do eksperymentowania z wartościami animation-timing-function i położeniem elementów oraz tworzenia własnych scen. Nie zapomnijcie podzielić się efektami w komentarzach.

Zobacz DEMO >> Podstawy animacji w CSS3

Grafika: freedigitalphotos.net