WEBVTT

00:00:01.020 --> 00:00:05.462
No dobrze. Pewnie zastanawiacie się,
czy używać "setInterval",

00:00:05.562 --> 00:00:08.614
czy "requestAnimationFrame"
do swoich animacji...

00:00:08.691 --> 00:00:12.654
A ja dorzucę do tego
jeszcze jedną możliwość.

00:00:13.557 --> 00:00:16.887
Widzicie, w Chrome,
Firefoksie i IE10+

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

00:00:21.493 --> 00:00:24.077
bez użycia JavaScript.

00:00:24.799 --> 00:00:27.492
Usuńmy kod,
który właśnie napisaliśmy

00:00:27.539 --> 00:00:30.627
i wypróbujmy to
do animacji Koleżki-O-Nie.

00:00:30.766 --> 00:00:36.656
Umieszczę tu długi komentarz
z wielu linii. Wokół tego wszystkiego.

00:00:36.727 --> 00:00:40.482
Najpierw dodamy do strony tag "style".

00:00:40.582 --> 00:00:44.539
A potem dodamy coś,
co wygląda jak reguła CSS,

00:00:44.639 --> 00:00:47.786
ale to definicja naszej animacji.

00:00:47.898 --> 00:00:50.085
Piszemy "keyframes",

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

00:00:54.913 --> 00:00:56.401
oraz klamry.

00:00:57.283 --> 00:01:01.196
Żeby zrobić prostą animację,
przechodzącą od 1. stanu do 2.,

00:01:01.267 --> 00:01:06.362
określimy stany "from" i "to".

00:01:07.453 --> 00:01:12.084
Wewnątrz "from" zapiszemy, jaka
powinna być początkowa własność CSS.

00:01:12.184 --> 00:01:15.574
Pamiętacie,
że początek ustawiliśmy na 50 pikseli?

00:01:16.406 --> 00:01:20.573
Wewnątrz "to" napiszemy,
jaka powinna być właściwość końcowa.

00:01:20.642 --> 00:01:25.310
Tutaj może to było 300 pikseli.
Przy tym kończyliśmy, pamiętacie?

00:01:26.253 --> 00:01:29.930
Po zdefiniowaniu animacji
musimy powiedzieć przeglądarce,

00:01:30.034 --> 00:01:33.483
który element
powinien z tej animacji korzystać.

00:01:33.624 --> 00:01:37.899
Zatem dodamy
normalną regułę CSS dla Koleżki.

00:01:38.797 --> 00:01:41.978
Tutaj określimy nazwę animacji...

00:01:44.118 --> 00:01:46.486
to "getbigger"...

00:01:47.183 --> 00:01:51.989
potem wpiszemy czas trwania animacji,
czyli trzy sekundy.

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

00:01:55.141 --> 00:01:58.653
Niektórzy z was mogą myśleć:
"Pięknie, to działa!".

00:01:58.731 --> 00:02:03.321
Użytkownicy przeglądarek takich jak
Safari lub Chrome nie widzą efektu.

00:02:03.421 --> 00:02:07.825
Z powodu tzw. prefiksów dostawców.

00:02:09.914 --> 00:02:13.770
Czasami przeglądarka obsługuje

00:02:13.918 --> 00:02:15.987
jakąś nową, wyrafinowaną opcję,

00:02:16.087 --> 00:02:19.366
do której dokłada się
prefiks dostawcy,

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

00:02:21.904 --> 00:02:25.914
W ten sposób przeglądarki
wypróbowują nowe opcje.

00:02:26.014 --> 00:02:29.224
Aby to działało w Chrome
(o ile jeszcze nie działa),

00:02:29.324 --> 00:02:33.785
musimy powtórzyć to, co zrobiliśmy,
a z przodu dać webkit.

00:02:34.807 --> 00:02:38.074
Musimy więc powtórzyć tę część

00:02:38.174 --> 00:02:41.378
i umieścić webkit tutaj.

00:02:41.552 --> 00:02:45.326
A tu powielimy to

00:02:45.449 --> 00:02:49.900
i damy -webkit-, -webkit-.

00:02:49.984 --> 00:02:51.456
O, pięknie!

00:02:51.566 --> 00:02:55.264
Teraz Koleżka rośnie
w każdej przeglądarce.

00:02:55.416 --> 00:02:58.050
Mam nadzieję,
że kiedy oglądacie ten film,

00:02:58.085 --> 00:03:00.279
prefiksy nie są już potrzebne.

00:03:00.329 --> 00:03:02.299
Ale dobrze wiedzieć, że istnieją,

00:03:02.454 --> 00:03:06.061
bo mogą się wam kiedyś przydać
do jakiejś innej opcji.

00:03:08.085 --> 00:03:11.689
W CSS jest jeszcze jeden sposób
na robienie animacji,

00:03:11.789 --> 00:03:14.405
związany z właściwością "transition".

00:03:14.505 --> 00:03:17.694
Mówi ona przeglądarce,
jak łagodnie przejść

00:03:17.806 --> 00:03:20.550
od jednej właściwości do drugiej.

00:03:20.664 --> 00:03:25.264
Powiedzmy, że chcemy,
by czcionka pozostałego czasu

00:03:25.364 --> 00:03:28.306
rosła, gdy najedziemy na nią myszką.

00:03:28.388 --> 00:03:30.419
Moglibyśmy zrobić to w JavaScript,

00:03:30.519 --> 00:03:33.344
przypisując listę zdarzeń
dla "mouseOver";

00:03:33.444 --> 00:03:35.379
potem "requestAnimationFrame",

00:03:35.479 --> 00:03:38.222
by zwiększać właściwość
"rozmiar czcionki".

00:03:38.322 --> 00:03:42.841
Możemy też to zrobić także
całkowicie w CSS. Pomyślmy.

00:03:42.937 --> 00:03:48.475
Jak normalnie zwiększyliśmy czcionkę
w CSS, w związku z ruchem myszki?

00:03:48.646 --> 00:03:51.243
Np. za pomocą reguły "hover".

00:03:51.343 --> 00:03:54.339
Piszemy "#countdown:hover"

00:03:54.439 --> 00:03:59.026
i rozmiar czcionki: 150 pikseli.

00:03:59.801 --> 00:04:03.159
Dobrze. Teraz musimy tylko
powiedzieć przeglądarce,

00:04:03.273 --> 00:04:06.363
żeby przeniosła
właściwość "rozmiar czcionki".

00:04:06.485 --> 00:04:11.286
O ile czasu ma ją przesunąć
i jakiej funkcji ma użyć.

00:04:11.499 --> 00:04:17.536
Piszemy: "transition:
font-size one second linear".

00:04:19.413 --> 00:04:21.884
A teraz zatrzymajcie odtwarzanie

00:04:21.983 --> 00:04:25.728
i spróbujcie najechać myszką na tekst.
Zobaczcie, co się stanie.

00:04:25.828 --> 00:04:28.654
Jeśli używacie Chrome, Firefoksa
lub IE 10+,

00:04:28.781 --> 00:04:31.232
tekst powinien rosnąć gładko.

00:04:31.332 --> 00:04:35.458
Nie potrzebujecie do tej metody
żadnych prefiksów dostawców.

00:04:35.607 --> 00:04:39.289
Bardzo dużo możecie zrobić
z pomocą animacji i "transition".

00:04:39.433 --> 00:04:41.983
Przeglądarki
dobrze sobie z nimi radzą.

00:04:42.055 --> 00:04:44.932
Zachęcam: poznawajcie obie metody.