Animacje CSS – jak tworzyć animacje w CSS? Wady i zalety animacji CSS

Opracowane przez znaną organizację W3C kaskadowe arkusze stylów (ang. Cascading Style Sheets) znane są powszechnie pod akronimem CSS. Język ten stworzony został w 1996 roku w celu rozgraniczenia struktury dokumentu HTML od formy prezentacji. Jak w kilka minut wykreować płynną animację w CSS? Jakie biblioteki mogą się przydać przy projektowaniu przejść i animacji? Dlaczego animowane w JavaScripcie elementy i treści opłaca się zastąpić przy pomocy CSS? Na wszystkie te i wiele innych pytań odpowiadamy poniżej. 

Jak tworzyć animacje w aplikacjach webowych używając tylko CSS?

Animowane elementy aplikacji webowych zobaczyć możemy dziś bez problemu na niemalże każdej stronie. Niegdyś do tworzenia animacji na stronach internetowych wykorzystywało się głównie Adobe Flash, ale wraz z oficjalnym wycofaniem wsparcia dla tej technologii szybko zastąpiono ją przy pomocy JavaScriptu i CSS. Obydwa te języki, podobnie jak HTML, są w pełni obsługiwane przez większość nowoczesnych przeglądarek internetowych. CSS doskonale sprawdza się w przypadku animacji dwuwymiarowych takich jak np. opadanie, wznoszenie, przesuwanie, rotowanie, zanikanie, pulsowanie, przybliżanie czy oddalanie. Jeżeli chodzi o animacje trójwymiarowe, to zamiast CSS zdecydowanie bardziej przydaje się JavaScript. Za przykład posłużyć mogą tu choćby witryny, które powstały przy pomocy bibliotek takich jak Three.js czy P5.js. Trzeba tu jednak zwrócić uwagę, iż animacje w JavaScript mogą się wcale nie wyświetlić, jeśli w przeglądarce jest to zablokowane (np. ze względu na ustawienia AdBlocka albo antywirusa). Jako że umieszczone w JavaScripcie treści są gorzej pozycjonowane w wyszukiwarkach, to w przypadku dwuwymiarowych animacji oraz przejść znacznie bardziej opłaca się korzystać z CSS.

Animacje CSS – podstawowa składnia funkcji animation

Do tworzenia większości animacji w CSS wykorzystuje się zazwyczaj wbudowaną funkcję animation. Prawidłowo wywołać ją można jedynie, jeśli zdefiniuje się parametry takie jak:

• animation-name (określa, która funkcja keyframe ma zostać wywołana po uruchomieniu animacji),
• animation-duration (określa, jak długo ma trwać pojedynczy cykl animacji),
• animation-timing-function (określa szybkość wykonywania animacji na poszczególnych krokach),
• animation-delay (określa, z jakim opóźnieniem ma zacząć się animacja),
• animation-iteration-count (określa, ile razy dana animacja ma się wykonać),
• animation-direction (określa kierunek wykonywania animacji),
• animation-fill-mode (określa, co ma się stać z animacją, gdy dobiegnie końca),
• animation-play-state (określa stan animacji jako działająca lub wstrzymana).

W kodzie CSS funkcję animation umieszczamy wewnątrz elementu, który ma być docelowo animowany. Żeby całość działała jednak prawidłowo, trzeba jeszcze zdefiniować funkcję keyframe przy pomocy frazy keyframe poprzedzonej znakiem małpy. W praktyce mogłoby to wyglądać następująco:

@keyframe animacja {

from {

opacity:0;

}

to {

opacity:1;

}}

body {

display:flex;

justify-content: center;

align-items: center;

min-height:100vh;

}

     .panel {

width: 500px;

height: 500px;

background-color: red;

animation-name: animacja;

animation-duration: 20s;

animation-delay: 5s;

}

W naszym przykładzie czerwony kwadrat z krawędziami o długości 500 pikseli pojawi się z 5-sekundowym opóźnieniem. Animacja będzie trwać 20 sekund. Początkowo będzie on prawie niewidoczny, ale wraz z upływającym czasem stanie się on w 100% nieprzezroczysty. Aby cały widoczny wyżej kod zadziałał, należy pamiętać o tym, iż element (zwany w naszym przykładzie panelem) musi zostać dodany w HTML. Można to zrobić przykładowo przy pomocy następującej instrukcji.

Warto wspomnieć też, iż wewnątrz funkcji keyframes stan obiektu w poszczególnych krokach animacji można ustawiać również za pośrednictwem znaku %. Jeżeli wspomnianą wyżej funkcję keyframes zastąpimy w następujący sposób, to nasz kwadrat w trakcie animacji co 5 sekund zmieni swój kolor z czerwonego na różowy, niebieski, fioletowy i zielony.

@keyframe animacja {

0% {

background-color: red;

}

25% {

background-color: pink;

}

50% {

background-color: blue;

}

75% {

background-color: violet;

}

100% {

background-color: green;

}

}

Jakie biblioteki animacji CSS mogą się przydać przy projektowaniu frontendu aplikacji webowych?

W CSS efekt animacji uzyskać można nie tylko za pośrednictwem funkcji animation, ale także przy pomocy przejść zwanych transitions. Tworzenie wydajnych i estetycznych animacji w CSS staje się dużo łatwiejsze, jeśli wykorzystamy do tego dostępne publicznie biblioteki animacji CSS. Dzięki nim, zamiast samodzielnie zastanawiać się, jak przesunąć płynnie obiekt z jednej strony ekranu na drugą, wystarczy jedynie wczytać jedno z tysięcy gotowych i, co ważne, zoptymalizowanych pod kątem wydajności rozwiązań.

Jeśli zastanawiacie się, jakie biblioteki animacji CSS warto znać, to świetnie trafiliście. Wśród najciekawszych i cieszących się największą popularnością bibliotek należy wyróżnić AnimXYZ, Animate.css, Animate Plus, CSShake, CSS Sharky Animation, CSS Circle Progress, DynCSS, Dynamic.css, Effeckt.css, Magic Animations, Motion CSS, Hover.css, Obnoxious.CSS, Tuesday.css, wickedCSS, Woah.css, Whirl oraz Repaintless.css. Wszystkie wspomniane wyżej rozwiązania przydadzą się przede wszystkim w trakcie budowania frontendu aplikacji webowych. Warto wspomnieć tutaj również, iż wiele z tych bibliotek można połączyć dodatkowo z bibliotekami JavaScriptowymi takimi jak choćby Ani.js, Bounce.js, anime.js, Snabbt.js, lax.js czy Wow.js.

Jak zmierzyć wydajność animacji w CSS? Optymalizacja animacji CSS

Jeżeli zastanawiacie się, czy dana animacja wyświetla się płynnie, to koniecznie sprawdźcie, ile ma klatek na sekundę. Wydajna i dobrze zoptymalizowana animacja powinna mieć około 60 klatek na sekundę. Nie warto przekraczać tego pułapu choćby ze względu na to, że większość współczesnych ekranów komputerowych odświeża obraz z częstotliwością 60Hz (60 razy na sekundę). Należy zaznaczyć tu jednak, iż proste animacje mogą wyglądać dobrze i płynnie nawet przy 30 klatkach, więc jeśli tak jest, to nie ma powodu do obaw. Optymalizacja animacji CSS staje się dużo łatwiejsza dzięki wbudowanym w przeglądarki Chrome i Firefox narzędziom developerskim. W obydwu tych programach wywołać je można w każdej chwili na dowolnej stronie przy pomocy F12 albo skrótu Ctrl + Shift + I.

Podsumowanie — dlaczego opłaca się zaprojektować animacje w CSS?

Mając na uwadze, jak wiele osób korzysta współcześnie z nakładek do blokowania reklam w przeglądarkach, łatwo zrozumieć można, dlaczego animacje w CSS są bezpieczniejsze niż te w JavaScript. W nowoczesnych aplikacjach webowych CSS wykorzystywany jest głównie do tego, aby ułatwiać obsługę oraz poprawiać estetykę i widoczność treści. Innymi słowy, CSS pozwala na to by:

• ułatwić znacząco wprowadzanie zmian w strukturze dokumentu,
• zwiększyć zakres dostępności witryny,
• uzyskać niższą zawiłość kodu aplikacji,
• wygodnie tworzyć estetyczne animacje i przejścia,
• lepiej pozycjonować dowolne elementy na stronie,
• swobodnie modyfikować parametry takie jak czcionki, marginesy, kolory znaków, odstępy międzywierszowe itp.

Na koniec warto przypomnieć też, iż dzięki animowanym w CSS elementom interfejs aplikacji po stronie frontendu staje się dużo przyjaźniejszy, a to przyciąga z czasem nowych użytkowników.