1
00:00:01,020 --> 00:00:05,462
No dobrze. Pewnie zastanawiacie się,
czy używać "setInterval",

2
00:00:05,562 --> 00:00:08,614
czy "requestAnimationFrame"
do swoich animacji...

3
00:00:08,691 --> 00:00:12,654
A ja dorzucę do tego
jeszcze jedną możliwość.

4
00:00:13,557 --> 00:00:16,887
Widzicie, w Chrome,
Firefoksie i IE10+

5
00:00:16,987 --> 00:00:21,374
jest sposób w CSS, żeby robić animacje

6
00:00:21,493 --> 00:00:24,077
bez użycia JavaScript.

7
00:00:24,799 --> 00:00:27,492
Usuńmy kod,
który właśnie napisaliśmy

8
00:00:27,539 --> 00:00:30,627
i wypróbujmy to
do animacji Koleżki-O-Nie.

9
00:00:30,766 --> 00:00:36,656
Umieszczę tu długi komentarz
z wielu linii. Wokół tego wszystkiego.

10
00:00:36,727 --> 00:00:40,482
Najpierw dodamy do strony tag "style".

11
00:00:40,582 --> 00:00:44,539
A potem dodamy coś,
co wygląda jak reguła CSS,

12
00:00:44,639 --> 00:00:47,786
ale to definicja naszej animacji.

13
00:00:47,898 --> 00:00:50,085
Piszemy "keyframes",

14
00:00:50,185 --> 00:00:54,195
a potem nazwę animacji, "getbigger",

15
00:00:54,913 --> 00:00:56,401
oraz klamry.

16
00:00:57,283 --> 00:01:01,196
Żeby zrobić prostą animację,
przechodzącą od 1. stanu do 2.,

17
00:01:01,267 --> 00:01:06,362
określimy stany "from" i "to".

18
00:01:07,453 --> 00:01:12,084
Wewnątrz "from" zapiszemy, jaka
powinna być początkowa własność CSS.

19
00:01:12,184 --> 00:01:15,574
Pamiętacie,
że początek ustawiliśmy na 50 pikseli?

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

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

22
00:01:26,253 --> 00:01:29,930
Po zdefiniowaniu animacji
musimy powiedzieć przeglądarce,

23
00:01:30,034 --> 00:01:33,483
który element
powinien z tej animacji korzystać.

24
00:01:33,624 --> 00:01:37,899
Zatem dodamy
normalną regułę CSS dla Koleżki.

25
00:01:38,797 --> 00:01:41,978
Tutaj określimy nazwę animacji...

26
00:01:44,118 --> 00:01:46,486
to "getbigger"...

27
00:01:47,183 --> 00:01:51,989
potem wpiszemy czas trwania animacji,
czyli trzy sekundy.

28
00:01:52,873 --> 00:01:55,031
Zależy, której używacie przeglądarki.

29
00:01:55,141 --> 00:01:58,653
Niektórzy z was mogą myśleć:
"Pięknie, to działa!".

30
00:01:58,731 --> 00:02:03,321
Użytkownicy przeglądarek takich jak
Safari lub Chrome nie widzą efektu.

31
00:02:03,421 --> 00:02:07,825
Z powodu tzw. prefiksów dostawców.

32
00:02:09,914 --> 00:02:13,770
Czasami przeglądarka obsługuje

33
00:02:13,918 --> 00:02:15,987
jakąś nową, wyrafinowaną opcję,

34
00:02:16,087 --> 00:02:19,366
do której dokłada się
prefiks dostawcy,

35
00:02:19,421 --> 00:02:21,804
by wskazać, że to się może zmienić.

36
00:02:21,904 --> 00:02:25,914
W ten sposób przeglądarki
wypróbowują nowe opcje.

37
00:02:26,014 --> 00:02:29,224
Aby to działało w Chrome
(o ile jeszcze nie działa),

38
00:02:29,324 --> 00:02:33,785
musimy powtórzyć to, co zrobiliśmy,
a z przodu dać webkit.

39
00:02:34,807 --> 00:02:38,074
Musimy więc powtórzyć tę część

40
00:02:38,174 --> 00:02:41,378
i umieścić webkit tutaj.

41
00:02:41,552 --> 00:02:45,326
A tu powielimy to

42
00:02:45,449 --> 00:02:49,900
i damy -webkit-, -webkit-.

43
00:02:49,984 --> 00:02:51,456
O, pięknie!

44
00:02:51,566 --> 00:02:55,264
Teraz Koleżka rośnie
w każdej przeglądarce.

45
00:02:55,416 --> 00:02:58,050
Mam nadzieję,
że kiedy oglądacie ten film,

46
00:02:58,085 --> 00:03:00,279
prefiksy nie są już potrzebne.

47
00:03:00,329 --> 00:03:02,299
Ale dobrze wiedzieć, że istnieją,

48
00:03:02,454 --> 00:03:06,061
bo mogą się wam kiedyś przydać
do jakiejś innej opcji.

49
00:03:08,085 --> 00:03:11,689
W CSS jest jeszcze jeden sposób
na robienie animacji,

50
00:03:11,789 --> 00:03:14,405
związany z właściwością "transition".

51
00:03:14,505 --> 00:03:17,694
Mówi ona przeglądarce,
jak łagodnie przejść

52
00:03:17,806 --> 00:03:20,550
od jednej właściwości do drugiej.

53
00:03:20,664 --> 00:03:25,264
Powiedzmy, że chcemy,
by czcionka pozostałego czasu

54
00:03:25,364 --> 00:03:28,306
rosła, gdy najedziemy na nią myszką.

55
00:03:28,388 --> 00:03:30,419
Moglibyśmy zrobić to w JavaScript,

56
00:03:30,519 --> 00:03:33,344
przypisując listę zdarzeń
dla "mouseOver";

57
00:03:33,444 --> 00:03:35,379
potem "requestAnimationFrame",

58
00:03:35,479 --> 00:03:38,222
by zwiększać właściwość
"rozmiar czcionki".

59
00:03:38,322 --> 00:03:42,841
Możemy też to zrobić także
całkowicie w CSS. Pomyślmy.

60
00:03:42,937 --> 00:03:48,475
Jak normalnie zwiększyliśmy czcionkę
w CSS, w związku z ruchem myszki?

61
00:03:48,646 --> 00:03:51,243
Np. za pomocą reguły "hover".

62
00:03:51,343 --> 00:03:54,339
Piszemy "#countdown:hover"

63
00:03:54,439 --> 00:03:59,026
i rozmiar czcionki: 150 pikseli.

64
00:03:59,801 --> 00:04:03,159
Dobrze. Teraz musimy tylko
powiedzieć przeglądarce,

65
00:04:03,273 --> 00:04:06,363
żeby przeniosła
właściwość "rozmiar czcionki".

66
00:04:06,485 --> 00:04:11,286
O ile czasu ma ją przesunąć
i jakiej funkcji ma użyć.

67
00:04:11,499 --> 00:04:17,536
Piszemy: "transition:
font-size one second linear".

68
00:04:19,413 --> 00:04:21,884
A teraz zatrzymajcie odtwarzanie

69
00:04:21,983 --> 00:04:25,728
i spróbujcie najechać myszką na tekst.
Zobaczcie, co się stanie.

70
00:04:25,828 --> 00:04:28,654
Jeśli używacie Chrome, Firefoksa
lub IE 10+,

71
00:04:28,781 --> 00:04:31,232
tekst powinien rosnąć gładko.

72
00:04:31,332 --> 00:04:35,458
Nie potrzebujecie do tej metody
żadnych prefiksów dostawców.

73
00:04:35,607 --> 00:04:39,289
Bardzo dużo możecie zrobić
z pomocą animacji i "transition".

74
00:04:39,433 --> 00:04:41,983
Przeglądarki
dobrze sobie z nimi radzą.

75
00:04:42,055 --> 00:04:44,932
Zachęcam: poznawajcie obie metody.