0:00:01.020,0:00:05.462
No dobrze. Pewnie zastanawiacie się,[br]czy używać "setInterval",

0:00:05.562,0:00:08.614
czy "requestAnimationFrame"[br]do swoich animacji...

0:00:08.691,0:00:12.654
A ja dorzucę do tego[br]jeszcze jedną możliwość.

0:00:13.557,0:00:16.887
Widzicie, w Chrome,[br]Firefoksie i IE10+

0:00:16.987,0:00:21.374
jest sposób w CSS, żeby robić animacje

0:00:21.493,0:00:24.077
bez użycia JavaScript.

0:00:24.799,0:00:27.492
Usuńmy kod,[br]który właśnie napisaliśmy

0:00:27.539,0:00:30.627
i wypróbujmy to[br]do animacji Koleżki-O-Nie.

0:00:30.766,0:00:36.656
Umieszczę tu długi komentarz[br]z wielu linii. Wokół tego wszystkiego.

0:00:36.727,0:00:40.482
Najpierw dodamy do strony tag "style".

0:00:40.582,0:00:44.539
A potem dodamy coś,[br]co wygląda jak reguła CSS,

0:00:44.639,0:00:47.786
ale to definicja naszej animacji.

0:00:47.898,0:00:50.085
Piszemy "keyframes",

0:00:50.185,0:00:54.195
a potem nazwę animacji, "getbigger",

0:00:54.913,0:00:56.401
oraz klamry.

0:00:57.283,0:01:01.196
Żeby zrobić prostą animację,[br]przechodzącą od 1. stanu do 2.,

0:01:01.267,0:01:06.362
określimy stany "from" i "to".

0:01:07.453,0:01:12.084
Wewnątrz "from" zapiszemy, jaka[br]powinna być początkowa własność CSS.

0:01:12.184,0:01:15.574
Pamiętacie,[br]że początek ustawiliśmy na 50 pikseli?

0:01:16.406,0:01:20.573
Wewnątrz "to" napiszemy,[br]jaka powinna być właściwość końcowa.

0:01:20.642,0:01:25.310
Tutaj może to było 300 pikseli.[br]Przy tym kończyliśmy, pamiętacie?

0:01:26.253,0:01:29.930
Po zdefiniowaniu animacji[br]musimy powiedzieć przeglądarce,

0:01:30.034,0:01:33.483
który element[br]powinien z tej animacji korzystać.

0:01:33.624,0:01:37.899
Zatem dodamy[br]normalną regułę CSS dla Koleżki.

0:01:38.797,0:01:41.978
Tutaj określimy nazwę animacji...

0:01:44.118,0:01:46.486
to "getbigger"...

0:01:47.183,0:01:51.989
potem wpiszemy czas trwania animacji,[br]czyli trzy sekundy.

0:01:52.873,0:01:55.031
Zależy, której używacie przeglądarki.

0:01:55.141,0:01:58.653
Niektórzy z was mogą myśleć:[br]"Pięknie, to działa!".

0:01:58.731,0:02:03.321
Użytkownicy przeglądarek takich jak[br]Safari lub Chrome nie widzą efektu.

0:02:03.421,0:02:07.825
Z powodu tzw. prefiksów dostawców.

0:02:09.914,0:02:13.770
Czasami przeglądarka obsługuje

0:02:13.918,0:02:15.987
jakąś nową, wyrafinowaną opcję,

0:02:16.087,0:02:19.366
do której dokłada się[br]prefiks dostawcy,

0:02:19.421,0:02:21.804
by wskazać, że to się może zmienić.

0:02:21.904,0:02:25.914
W ten sposób przeglądarki[br]wypróbowują nowe opcje.

0:02:26.014,0:02:29.224
Aby to działało w Chrome[br](o ile jeszcze nie działa),

0:02:29.324,0:02:33.785
musimy powtórzyć to, co zrobiliśmy,[br]a z przodu dać webkit.

0:02:34.807,0:02:38.074
Musimy więc powtórzyć tę część

0:02:38.174,0:02:41.378
i umieścić webkit tutaj.

0:02:41.552,0:02:45.326
A tu powielimy to

0:02:45.449,0:02:49.900
i damy -webkit-, -webkit-.

0:02:49.984,0:02:51.456
O, pięknie!

0:02:51.566,0:02:55.264
Teraz Koleżka rośnie[br]w każdej przeglądarce.

0:02:55.416,0:02:58.050
Mam nadzieję,[br]że kiedy oglądacie ten film,

0:02:58.085,0:03:00.279
prefiksy nie są już potrzebne.

0:03:00.329,0:03:02.299
Ale dobrze wiedzieć, że istnieją,

0:03:02.454,0:03:06.061
bo mogą się wam kiedyś przydać[br]do jakiejś innej opcji.

0:03:08.085,0:03:11.689
W CSS jest jeszcze jeden sposób[br]na robienie animacji,

0:03:11.789,0:03:14.405
związany z właściwością "transition".

0:03:14.505,0:03:17.694
Mówi ona przeglądarce,[br]jak łagodnie przejść

0:03:17.806,0:03:20.550
od jednej właściwości do drugiej.

0:03:20.664,0:03:25.264
Powiedzmy, że chcemy,[br]by czcionka pozostałego czasu

0:03:25.364,0:03:28.306
rosła, gdy najedziemy na nią myszką.

0:03:28.388,0:03:30.419
Moglibyśmy zrobić to w JavaScript,

0:03:30.519,0:03:33.344
przypisując listę zdarzeń[br]dla "mouseOver";

0:03:33.444,0:03:35.379
potem "requestAnimationFrame",

0:03:35.479,0:03:38.222
by zwiększać właściwość[br]"rozmiar czcionki".

0:03:38.322,0:03:42.841
Możemy też to zrobić także[br]całkowicie w CSS. Pomyślmy.

0:03:42.937,0:03:48.475
Jak normalnie zwiększyliśmy czcionkę[br]w CSS, w związku z ruchem myszki?

0:03:48.646,0:03:51.243
Np. za pomocą reguły "hover".

0:03:51.343,0:03:54.339
Piszemy "#countdown:hover"

0:03:54.439,0:03:59.026
i rozmiar czcionki: 150 pikseli.

0:03:59.801,0:04:03.159
Dobrze. Teraz musimy tylko[br]powiedzieć przeglądarce,

0:04:03.273,0:04:06.363
żeby przeniosła[br]właściwość "rozmiar czcionki".

0:04:06.485,0:04:11.286
O ile czasu ma ją przesunąć[br]i jakiej funkcji ma użyć.

0:04:11.499,0:04:17.536
Piszemy: "transition:[br]font-size one second linear".

0:04:19.413,0:04:21.884
A teraz zatrzymajcie odtwarzanie

0:04:21.983,0:04:25.728
i spróbujcie najechać myszką na tekst.[br]Zobaczcie, co się stanie.

0:04:25.828,0:04:28.654
Jeśli używacie Chrome, Firefoksa[br]lub IE 10+,

0:04:28.781,0:04:31.232
tekst powinien rosnąć gładko.

0:04:31.332,0:04:35.458
Nie potrzebujecie do tej metody[br]żadnych prefiksów dostawców.

0:04:35.607,0:04:39.289
Bardzo dużo możecie zrobić[br]z pomocą animacji i "transition".

0:04:39.433,0:04:41.983
Przeglądarki[br]dobrze sobie z nimi radzą.

0:04:42.055,0:04:44.932
Zachęcam: poznawajcie obie metody.