No dobrze. Pewnie zastanawiacie się, czy używać "setInterval",
czy "requestAnimationFrame" do swoich animacji...
A ja dorzucę do tego jeszcze jedną możliwość.
Widzicie, w Chrome, Firefoksie i IE10+
jest sposób w CSS, żeby robić animacje
bez użycia JavaScript.
Usuńmy kod, który właśnie napisaliśmy
i wypróbujmy to do animacji Koleżki-O-Nie.
Umieszczę tu długi komentarz z wielu linii. Wokół tego wszystkiego.
Najpierw dodamy do strony tag "style".
A potem dodamy coś, co wygląda jak reguła CSS,
ale to definicja naszej animacji.
Piszemy "keyframes",
a potem nazwę animacji, "getbigger",
oraz klamry.
Żeby zrobić prostą animację, przechodzącą od 1. stanu do 2.,
określimy stany "from" i "to".
Wewnątrz "from" zapiszemy, jaka powinna być początkowa własność CSS.
Pamiętacie, że początek ustawiliśmy na 50 pikseli?
Wewnątrz "to" napiszemy, jaka powinna być właściwość końcowa.
Tutaj może to było 300 pikseli. Przy tym kończyliśmy, pamiętacie?
Po zdefiniowaniu animacji musimy powiedzieć przeglądarce,
który element powinien z tej animacji korzystać.
Zatem dodamy normalną regułę CSS dla Koleżki.
Tutaj określimy nazwę animacji...
to "getbigger"...
potem wpiszemy czas trwania animacji, czyli trzy sekundy.
Zależy, której używacie przeglądarki.
Niektórzy z was mogą myśleć: "Pięknie, to działa!".
Użytkownicy przeglądarek takich jak Safari lub Chrome nie widzą efektu.
Z powodu tzw. prefiksów dostawców.
Czasami przeglądarka obsługuje
jakąś nową, wyrafinowaną opcję,
do której dokłada się prefiks dostawcy,
by wskazać, że to się może zmienić.
W ten sposób przeglądarki wypróbowują nowe opcje.
Aby to działało w Chrome (o ile jeszcze nie działa),
musimy powtórzyć to, co zrobiliśmy, a z przodu dać webkit.
Musimy więc powtórzyć tę część
i umieścić webkit tutaj.
A tu powielimy to
i damy -webkit-, -webkit-.
O, pięknie!
Teraz Koleżka rośnie w każdej przeglądarce.
Mam nadzieję, że kiedy oglądacie ten film,
prefiksy nie są już potrzebne.
Ale dobrze wiedzieć, że istnieją,
bo mogą się wam kiedyś przydać do jakiejś innej opcji.
W CSS jest jeszcze jeden sposób na robienie animacji,
związany z właściwością "transition".
Mówi ona przeglądarce, jak łagodnie przejść
od jednej właściwości do drugiej.
Powiedzmy, że chcemy, by czcionka pozostałego czasu
rosła, gdy najedziemy na nią myszką.
Moglibyśmy zrobić to w JavaScript,
przypisując listę zdarzeń dla "mouseOver";
potem "requestAnimationFrame",
by zwiększać właściwość "rozmiar czcionki".
Możemy też to zrobić także całkowicie w CSS. Pomyślmy.
Jak normalnie zwiększyliśmy czcionkę w CSS, w związku z ruchem myszki?
Np. za pomocą reguły "hover".
Piszemy "#countdown:hover"
i rozmiar czcionki: 150 pikseli.
Dobrze. Teraz musimy tylko powiedzieć przeglądarce,
żeby przeniosła właściwość "rozmiar czcionki".
O ile czasu ma ją przesunąć i jakiej funkcji ma użyć.
Piszemy: "transition: font-size one second linear".
A teraz zatrzymajcie odtwarzanie
i spróbujcie najechać myszką na tekst. Zobaczcie, co się stanie.
Jeśli używacie Chrome, Firefoksa lub IE 10+,
tekst powinien rosnąć gładko.
Nie potrzebujecie do tej metody żadnych prefiksów dostawców.
Bardzo dużo możecie zrobić z pomocą animacji i "transition".
Przeglądarki dobrze sobie z nimi radzą.
Zachęcam: poznawajcie obie metody.