[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.02,0:00:05.46,Default,,0000,0000,0000,,No dobrze. Pewnie zastanawiacie się,\Nczy używać "setInterval",
Dialogue: 0,0:00:05.56,0:00:08.61,Default,,0000,0000,0000,,czy "requestAnimationFrame"\Ndo swoich animacji...
Dialogue: 0,0:00:08.69,0:00:12.65,Default,,0000,0000,0000,,A ja dorzucę do tego\Njeszcze jedną możliwość.
Dialogue: 0,0:00:13.56,0:00:16.89,Default,,0000,0000,0000,,Widzicie, w Chrome,\NFirefoksie i IE10+
Dialogue: 0,0:00:16.99,0:00:21.37,Default,,0000,0000,0000,,jest sposób w CSS, żeby robić animacje
Dialogue: 0,0:00:21.49,0:00:24.08,Default,,0000,0000,0000,,bez użycia JavaScript.
Dialogue: 0,0:00:24.80,0:00:27.49,Default,,0000,0000,0000,,Usuńmy kod,\Nktóry właśnie napisaliśmy
Dialogue: 0,0:00:27.54,0:00:30.63,Default,,0000,0000,0000,,i wypróbujmy to\Ndo animacji Koleżki-O-Nie.
Dialogue: 0,0:00:30.77,0:00:36.66,Default,,0000,0000,0000,,Umieszczę tu długi komentarz\Nz wielu linii. Wokół tego wszystkiego.
Dialogue: 0,0:00:36.73,0:00:40.48,Default,,0000,0000,0000,,Najpierw dodamy do strony tag "style".
Dialogue: 0,0:00:40.58,0:00:44.54,Default,,0000,0000,0000,,A potem dodamy coś,\Nco wygląda jak reguła CSS,
Dialogue: 0,0:00:44.64,0:00:47.79,Default,,0000,0000,0000,,ale to definicja naszej animacji.
Dialogue: 0,0:00:47.90,0:00:50.08,Default,,0000,0000,0000,,Piszemy "keyframes",
Dialogue: 0,0:00:50.18,0:00:54.20,Default,,0000,0000,0000,,a potem nazwę animacji, "getbigger",
Dialogue: 0,0:00:54.91,0:00:56.40,Default,,0000,0000,0000,,oraz klamry.
Dialogue: 0,0:00:57.28,0:01:01.20,Default,,0000,0000,0000,,Żeby zrobić prostą animację,\Nprzechodzącą od 1. stanu do 2.,
Dialogue: 0,0:01:01.27,0:01:06.36,Default,,0000,0000,0000,,określimy stany "from" i "to".
Dialogue: 0,0:01:07.45,0:01:12.08,Default,,0000,0000,0000,,Wewnątrz "from" zapiszemy, jaka\Npowinna być początkowa własność CSS.
Dialogue: 0,0:01:12.18,0:01:15.57,Default,,0000,0000,0000,,Pamiętacie,\Nże początek ustawiliśmy na 50 pikseli?
Dialogue: 0,0:01:16.41,0:01:20.57,Default,,0000,0000,0000,,Wewnątrz "to" napiszemy,\Njaka powinna być właściwość końcowa.
Dialogue: 0,0:01:20.64,0:01:25.31,Default,,0000,0000,0000,,Tutaj może to było 300 pikseli.\NPrzy tym kończyliśmy, pamiętacie?
Dialogue: 0,0:01:26.25,0:01:29.93,Default,,0000,0000,0000,,Po zdefiniowaniu animacji\Nmusimy powiedzieć przeglądarce,
Dialogue: 0,0:01:30.03,0:01:33.48,Default,,0000,0000,0000,,który element\Npowinien z tej animacji korzystać.
Dialogue: 0,0:01:33.62,0:01:37.90,Default,,0000,0000,0000,,Zatem dodamy\Nnormalną regułę CSS dla Koleżki.
Dialogue: 0,0:01:38.80,0:01:41.98,Default,,0000,0000,0000,,Tutaj określimy nazwę animacji...
Dialogue: 0,0:01:44.12,0:01:46.49,Default,,0000,0000,0000,,to "getbigger"...
Dialogue: 0,0:01:47.18,0:01:51.99,Default,,0000,0000,0000,,potem wpiszemy czas trwania animacji,\Nczyli trzy sekundy.
Dialogue: 0,0:01:52.87,0:01:55.03,Default,,0000,0000,0000,,Zależy, której używacie przeglądarki.
Dialogue: 0,0:01:55.14,0:01:58.65,Default,,0000,0000,0000,,Niektórzy z was mogą myśleć:\N"Pięknie, to działa!".
Dialogue: 0,0:01:58.73,0:02:03.32,Default,,0000,0000,0000,,Użytkownicy przeglądarek takich jak\NSafari lub Chrome nie widzą efektu.
Dialogue: 0,0:02:03.42,0:02:07.82,Default,,0000,0000,0000,,Z powodu tzw. prefiksów dostawców.
Dialogue: 0,0:02:09.91,0:02:13.77,Default,,0000,0000,0000,,Czasami przeglądarka obsługuje
Dialogue: 0,0:02:13.92,0:02:15.99,Default,,0000,0000,0000,,jakąś nową, wyrafinowaną opcję,
Dialogue: 0,0:02:16.09,0:02:19.37,Default,,0000,0000,0000,,do której dokłada się\Nprefiks dostawcy,
Dialogue: 0,0:02:19.42,0:02:21.80,Default,,0000,0000,0000,,by wskazać, że to się może zmienić.
Dialogue: 0,0:02:21.90,0:02:25.91,Default,,0000,0000,0000,,W ten sposób przeglądarki\Nwypróbowują nowe opcje.
Dialogue: 0,0:02:26.01,0:02:29.22,Default,,0000,0000,0000,,Aby to działało w Chrome\N(o ile jeszcze nie działa),
Dialogue: 0,0:02:29.32,0:02:33.78,Default,,0000,0000,0000,,musimy powtórzyć to, co zrobiliśmy,\Na z przodu dać webkit.
Dialogue: 0,0:02:34.81,0:02:38.07,Default,,0000,0000,0000,,Musimy więc powtórzyć tę część
Dialogue: 0,0:02:38.17,0:02:41.38,Default,,0000,0000,0000,,i umieścić webkit tutaj.
Dialogue: 0,0:02:41.55,0:02:45.33,Default,,0000,0000,0000,,A tu powielimy to
Dialogue: 0,0:02:45.45,0:02:49.90,Default,,0000,0000,0000,,i damy -webkit-, -webkit-.
Dialogue: 0,0:02:49.98,0:02:51.46,Default,,0000,0000,0000,,O, pięknie!
Dialogue: 0,0:02:51.57,0:02:55.26,Default,,0000,0000,0000,,Teraz Koleżka rośnie\Nw każdej przeglądarce.
Dialogue: 0,0:02:55.42,0:02:58.05,Default,,0000,0000,0000,,Mam nadzieję,\Nże kiedy oglądacie ten film,
Dialogue: 0,0:02:58.08,0:03:00.28,Default,,0000,0000,0000,,prefiksy nie są już potrzebne.
Dialogue: 0,0:03:00.33,0:03:02.30,Default,,0000,0000,0000,,Ale dobrze wiedzieć, że istnieją,
Dialogue: 0,0:03:02.45,0:03:06.06,Default,,0000,0000,0000,,bo mogą się wam kiedyś przydać\Ndo jakiejś innej opcji.
Dialogue: 0,0:03:08.08,0:03:11.69,Default,,0000,0000,0000,,W CSS jest jeszcze jeden sposób\Nna robienie animacji,
Dialogue: 0,0:03:11.79,0:03:14.40,Default,,0000,0000,0000,,związany z właściwością "transition".
Dialogue: 0,0:03:14.50,0:03:17.69,Default,,0000,0000,0000,,Mówi ona przeglądarce,\Njak łagodnie przejść
Dialogue: 0,0:03:17.81,0:03:20.55,Default,,0000,0000,0000,,od jednej właściwości do drugiej.
Dialogue: 0,0:03:20.66,0:03:25.26,Default,,0000,0000,0000,,Powiedzmy, że chcemy,\Nby czcionka pozostałego czasu
Dialogue: 0,0:03:25.36,0:03:28.31,Default,,0000,0000,0000,,rosła, gdy najedziemy na nią myszką.
Dialogue: 0,0:03:28.39,0:03:30.42,Default,,0000,0000,0000,,Moglibyśmy zrobić to w JavaScript,
Dialogue: 0,0:03:30.52,0:03:33.34,Default,,0000,0000,0000,,przypisując listę zdarzeń\Ndla "mouseOver";
Dialogue: 0,0:03:33.44,0:03:35.38,Default,,0000,0000,0000,,potem "requestAnimationFrame",
Dialogue: 0,0:03:35.48,0:03:38.22,Default,,0000,0000,0000,,by zwiększać właściwość\N"rozmiar czcionki".
Dialogue: 0,0:03:38.32,0:03:42.84,Default,,0000,0000,0000,,Możemy też to zrobić także\Ncałkowicie w CSS. Pomyślmy.
Dialogue: 0,0:03:42.94,0:03:48.48,Default,,0000,0000,0000,,Jak normalnie zwiększyliśmy czcionkę\Nw CSS, w związku z ruchem myszki?
Dialogue: 0,0:03:48.65,0:03:51.24,Default,,0000,0000,0000,,Np. za pomocą reguły "hover".
Dialogue: 0,0:03:51.34,0:03:54.34,Default,,0000,0000,0000,,Piszemy "#countdown:hover"
Dialogue: 0,0:03:54.44,0:03:59.03,Default,,0000,0000,0000,,i rozmiar czcionki: 150 pikseli.
Dialogue: 0,0:03:59.80,0:04:03.16,Default,,0000,0000,0000,,Dobrze. Teraz musimy tylko\Npowiedzieć przeglądarce,
Dialogue: 0,0:04:03.27,0:04:06.36,Default,,0000,0000,0000,,żeby przeniosła\Nwłaściwość "rozmiar czcionki".
Dialogue: 0,0:04:06.48,0:04:11.29,Default,,0000,0000,0000,,O ile czasu ma ją przesunąć\Ni jakiej funkcji ma użyć.
Dialogue: 0,0:04:11.50,0:04:17.54,Default,,0000,0000,0000,,Piszemy: "transition:\Nfont-size one second linear".
Dialogue: 0,0:04:19.41,0:04:21.88,Default,,0000,0000,0000,,A teraz zatrzymajcie odtwarzanie
Dialogue: 0,0:04:21.98,0:04:25.73,Default,,0000,0000,0000,,i spróbujcie najechać myszką na tekst.\NZobaczcie, co się stanie.
Dialogue: 0,0:04:25.83,0:04:28.65,Default,,0000,0000,0000,,Jeśli używacie Chrome, Firefoksa\Nlub IE 10+,
Dialogue: 0,0:04:28.78,0:04:31.23,Default,,0000,0000,0000,,tekst powinien rosnąć gładko.
Dialogue: 0,0:04:31.33,0:04:35.46,Default,,0000,0000,0000,,Nie potrzebujecie do tej metody\Nżadnych prefiksów dostawców.
Dialogue: 0,0:04:35.61,0:04:39.29,Default,,0000,0000,0000,,Bardzo dużo możecie zrobić\Nz pomocą animacji i "transition".
Dialogue: 0,0:04:39.43,0:04:41.98,Default,,0000,0000,0000,,Przeglądarki\Ndobrze sobie z nimi radzą.
Dialogue: 0,0:04:42.06,0:04:44.93,Default,,0000,0000,0000,,Zachęcam: poznawajcie obie metody.