Animacje w CSS3 – własność animation

Poznając HTML5 nie mogłam pominąć przyjrzenia się CSS3. O ile już wcześniej zaczęłam używać takich własności jak border-radius czy box-shadow o tyle podczas przeglądania pozostałych zainteresował mnie animation. Tym bardziej, że dosyć odważnie stwierdzają że może zastąpić animowane obrazki, flashowe animacje czy JS. 

Oczywiście w tej chwili tylko Firefox, Chrome i Safari ją wspierają i nikogo chyba nie zdziwi, że do Firefoxa konieczne jest dodanie prefiksu -moz-, a do pozostałych dwóch -webkit-. 

Życie web developera jest za łatwe ;o) Kiedyś było IE i reszta świata, teraz trzeba pisać kod CSS3 prawie pod każdą przeglądarkę. Oczywiście zdaję sobie sprawę, że dopóki CSS3 jest cały czas w fazie “experimental” każda przeglądarka może inaczej interpretować nowe własności itd, itp, no ale kurde!

Własność animation

W dokumentacji CSS w w3schools jest doskonale opisane jak wygląda składnia animation. Zwrócę tylko uwagę na to, że serce animacji jest de facto w @keyframes. To jest miejsce gdzie tworzymy animację poprzez wskazywanie styli jakie mają zostać zastosowane w poszczególnych etapach animacji. 

Kiedy poznawałam animation, stworzyłam prostą animację dostępną tu:

Animacja CSS3 z odrobiną JS

Aby ją zobaczyć należy otworzyć link w najnowszej wersji Firefoxa, Chrome lub Safari. Najlepiej w Chrome, ponieważ jedna z animacji wykorzystuje własność perspective, która nie została jeszcze zaimplementowana w Firefoxie, a Safari nie radzi sobie z nią jeśli chwilę wcześniej nadrzędny div był ukryty ;o)

Co mam na myśli pisząc “odrobina JS”?

Po pierwsze, wykorzystałam JS (jQuery) aby dodać trochę interakcji do animacji. Jednak wszystkie animacje (poza dwoma) są wywoływane poprzez przypisanie nazwy keyframes z pliku CSS. 

Po drugie, nie można przypisać dwóch różnych (choć jednoczesnych) animacji dla tego samego obiektu. Można to zrobić poprzez zagnieżdżanie divów i przypisanie odpowiednich akcji ale kontrolowanie kiedy co ma się wydarzyć ile razy jest dosyć trudne. Tym bardziej, że czas rozpoczęcia poszczególnych klatek podaje się w procentach, a czas samej animacji w sekundach. W animacji są dwa takie przypadki:

1. Potwór w topie z wielkim okiem. Jak na niego klikniesz zaczyna się obracać. Chciałam aby dodatkowo przeleciał na dół strony w tym samym czasie. Są to dwa różne zachowania tego samego obiektu na linii czasowej. Na koniec chciałam aby wykonał animację sprzed kliku. Ponieważ w tej chwili można przypisać jeden keyframes w danym momencie obrót potwora jest opisany w CSS3, a ruch przez stronę odbywa się przez jQuery animate(). Po zakończeniu ruchu przypisuje początkową animację.
2. Ten sam problem miałam z potworem na dole. Tym co ewidentnie jest głodny. Animacja góra-dół jest stworzona w CSS3, a ruch w prawo poprzez animate(). 

Na koniec musiałam wykorzystać JS do zmiany niektórych styli aby ukryć niektóre elementy na początku animacji. Dlaczego? Ponieważ niektóre animacje poszczególnych obiektów zaczynają się i kończą z innymi własnościami. A po zakończeniu animacji (jeśli nie jest ustawiona w nieskończoność) własności powracają do tych początkowych. Tak więc jeśli mam potwora dla którego animacją jest wyłonienie się “z nicości” i dodatkowo mam ustawione dla niego opóźnienie, to do momentu aż animacja nie rozpocznie się byłby widoczny. Nie mogę go również ukryć w CSS, bo jak animacja dla niego zakończy się to pozostanie ukryty. 

Wnioski

Animacja w CSS3 jest bardzo podobna do tego co oferuje jQuery z animate(). Tyle, że bez użycia JS.

Jednak w tej postaci animation nadaje się tylko do bardzo prostych animacji. Naprawdę prostych. Jeśli chcemy animować wiele obiektów, naprawdę trudno jest zachować kontrolę i wymierzyć kiedy co ma się rozpocząć.

Na pewno przydałaby się możliwość przypisania własności z końca animacji na stałe po jej zakończeniu – głównie dla animacji z opóźnieniem. AKTUALIZACJA: i jest. Nazywa się to animation-fill-mode

Było by też miło mieć mozliwość stworzenia różnych keyframes, a następnie wskazanie kolejności w jakiej mają się wykonać. W ten sposób bardziej skomplikowane animacje można rozbić na kilka prostszych i je połączyć w całość. Tak samo jak oprócz wartości procentowych fajnie by było mieć sekundowe  – lepsza kontrola przy bardziej złożonej animacji.

Generalnie przypomina mi to początki Flasha. Tylko zamiast klikania, przesuwania, obracania opisuje się każdą akcję kodem. Jeśli animacje w CSS3 przyjmą się, na pewno pojawią się aplikacje lub narzędzia w których będziemy klikać a w rezultacie otrzymamy kod dla CSS3 ;o) Założę się, że wtedy nawet Flash coś takiego udostępni ;o) Myślę jednak, że nie nastąpi to zbyt szybko.