1
00:00:00,851 --> 00:00:04,480
შეიძლება ახლა იმაზე დავობთ თუ რა ჯობს,

2
00:00:04,480 --> 00:00:08,522
SetInterval-ის გამოყენება
თუ requestAnimationFrame-სი,

3
00:00:08,522 --> 00:00:13,897
მაგრამ მე კიდევ ერთ
ვარიანტს შემოგთავაზებთ.

4
00:00:13,897 --> 00:00:17,165
Chrome-ში, Firefox-სა და IE10+-ში,

5
00:00:17,165 --> 00:00:21,580
არსებობს CSS-ით ანიმაციის შექმნის გზა,

6
00:00:21,580 --> 00:00:24,839
რისთვისაც ჯავასკრიპტი
საერთოდ არ არის საჭირო.

7
00:00:24,839 --> 00:00:30,763
რაც დავწერეთ გავაკომენტაროთ
და ვცადოთ Oh noes ანიმაციაზე.

8
00:00:30,763 --> 00:00:36,732
-- მოვაქციოთ მრავალხაზიან კომენტარში --

9
00:00:36,732 --> 00:00:41,051
დავიწყოთ გვერდისთვის
სტილის ტიპის დამატებით.

10
00:00:41,051 --> 00:00:44,756
შემდეგ კი დავუმატოთ
CSS-ის წესის მსგავსი ხაზი,

11
00:00:44,756 --> 00:00:48,045
რომელიც რეალურად ჩვენი
ანიმაციის განმარტება იქნება.

12
00:00:48,045 --> 00:00:55,292
დავწეროთ keyframes, შემდეგ კი
სახელი ჩვენი ანიმაციისთვის - getbigger,

13
00:00:55,292 --> 00:00:57,779
ბოლოს კი ფიგურული ფრჩხილები.

14
00:00:57,779 --> 00:01:01,364
უბრალო ანიმაციის გასაკეთებლად, რომელიც
ერთი მდგომარეობიდან მეორეში გადადის,

15
00:01:01,364 --> 00:01:07,253
განვსაზღვროთ -დან და -მდე, ანუ from და to.

16
00:01:07,253 --> 00:01:12,362
from-ში დავწეროთ CSS-ის საწყისი პირობა.

17
00:01:12,362 --> 00:01:16,483
თუ გაიხსენებთ, დასაწყისში ეს 50px იყო.

18
00:01:16,483 --> 00:01:21,267
to-ში დავწეროთ საბოლოო პირობა.

19
00:01:21,267 --> 00:01:26,055
მაგალითად, იყოს 300px.

20
00:01:26,055 --> 00:01:29,669
რადგან ანიმაცია განვმარტეთ,
ახლა ბრაუზერს უნდა ვუთხრათ,

21
00:01:29,669 --> 00:01:33,948
თუ რა ელემენტმა
უნდა გამოიყენოს ეს ანიმაცია.

22
00:01:33,948 --> 00:01:38,968
დავამატოთ ნორმალური
CSS წესი Oh noes-სთვის,

23
00:01:38,968 --> 00:01:47,245
შიგნით მივუთითოთ
ანიმაციის სახელი, getbigger,

24
00:01:47,245 --> 00:01:53,328
შემდეგ კი ანიმაციის
ხანგრძლივობა, სამი წამი.

25
00:01:53,328 --> 00:01:55,832
იმის მიხედვით თუ რა ბრაუზერი გაქვთ,

26
00:01:55,832 --> 00:01:59,202
ზოგიერთი ალბათ ფიქრობთ
რომ მაგარია და ყველაფერი მუშაობს,

27
00:01:59,202 --> 00:02:03,682
სხვებისთვის კი, Safari,
Chrome, ალბათ ეს არ მუშაობს.

28
00:02:03,682 --> 00:02:09,973
ეს არის რაღაცის, სახელად
Vendor Prefix-ების დამსახურება.

29
00:02:09,973 --> 00:02:16,342
ზოგჯერ ბრაუზერი წყვეტს რაიმე
ახალ თვისებას დაუჭიროს მხარი,

30
00:02:16,342 --> 00:02:19,471
მაგრამ ამ თვისებაზე
Vendor Prefix-ს განათავსებს,

31
00:02:19,471 --> 00:02:22,330
იმის ნიშნად, რომ შესაძლოა
ეს მომავალში შეიცვალოს.

32
00:02:22,330 --> 00:02:25,530
ეს მხოლოდ ბრაუზერების
კავშირია თვისებასთან.

33
00:02:25,530 --> 00:02:29,262
თუ ეს Chrome-ში გვინდა
გავუშვათ და ჯერ არ მუშაობს,

34
00:02:29,262 --> 00:02:32,005
საჭიროა ყველაფრის კოპირება რაც გავაკეთეთ

35
00:02:32,005 --> 00:02:34,831
და წინ webkit-ის დაწერა.

36
00:02:34,831 --> 00:02:38,529
ესეიგი, ვაკოპირებთ ამ ნაწილს,

37
00:02:38,529 --> 00:02:41,741
აქ ვწერთ: -webkit-

38
00:02:41,741 --> 00:02:50,114
აქ კი ვაკოპირებთ ამას და
აქაც, ვწერთ -webkit-, -webkit-

39
00:02:50,114 --> 00:02:55,094
ძალიან კარგი, ახლა გამოსახულება
იზრდება, ნებისმიერი ბრაუზერისთვის.

40
00:02:55,094 --> 00:02:58,113
იმედია იმ დროსითვის როცა ამას უყურებთ,

41
00:02:58,113 --> 00:03:00,246
Vendor Prefix-ები აღარ იქნება საჭირო,

42
00:03:00,246 --> 00:03:02,895
მაგრამ კარგია მათი არსებობის ცოდნა,

43
00:03:02,895 --> 00:03:08,194
შესაძლოა ოდესმე
მათი თვისებები გამოგვადგეს.

44
00:03:08,194 --> 00:03:11,803
CSS-ში კიდევ ერთი გზა
არსებობს ანიმაციის გასაკეთებლად.

45
00:03:11,863 --> 00:03:14,709
ეს არის გადატანის თვისება.

46
00:03:14,709 --> 00:03:20,624
ეს ბრაუზერს მიუთითებს თუ
როგორ გადავიდეს ერთი თვისებიდან მეორეზე.

47
00:03:20,624 --> 00:03:28,435
ვთქვათ, გვინდა დარჩენილი დროის ფონტის ზომა
გაიზარდოს როცა მაუსს მასზე გადავატარებთ.

48
00:03:28,435 --> 00:03:32,914
შეგვიძლია ეს ჯავასკრიპტში გავაკეთოთ
მაუსთან დაკავშირებული eventListener-ით,

49
00:03:32,914 --> 00:03:36,882
შემდეგ კი requestAnimationFrame-ს
გამოყენებით გავზარდოთ ფონტის ზომა,

50
00:03:36,882 --> 00:03:42,099
მაგრამ ამის გაკეთება
მთლიანად CSS-შიც შეგვიძლია.

51
00:03:42,099 --> 00:03:48,792
ვნახოთ, როგორ შევვლიდით CSS-ში ფონტს ისე,
რომ მაუსის გატარებისას იგი გაზრდილიყო?

52
00:03:48,792 --> 00:03:51,134
შეგვიძლია გამოვიყენოთ hover,

53
00:03:51,134 --> 00:03:55,061
ვწერთ: #countdown:hover,

54
00:03:55,061 --> 00:03:59,966
შემდეგ კი font-size: 150px;

55
00:03:59,966 --> 00:04:02,948
ახლა ისღა დაგვრჩენია ბრაუზერს მივუთითოთ,

56
00:04:02,948 --> 00:04:06,682
რომ ფონტის ზომის თვისება ცვალოს.

57
00:04:06,682 --> 00:04:11,477
რამდენ ხანში გააკეთოს ეს და
დროის ათვლის რა ფუნქცია გამოვიყენოთ?

58
00:04:11,477 --> 00:04:19,333
ვამბობთ: transition: font-size 1s linear;

59
00:04:19,333 --> 00:04:25,884
დააპაუზეთ გაკვეთილი და
გადაატარეთ მაუსი ტექსტს, ნახეთ რა მოხდება.

60
00:04:25,884 --> 00:04:28,869
თუ Chrome-ში, Firefox-ში ან IE10+-ში ხართ,

61
00:04:28,869 --> 00:04:31,725
მაშინ გამოსახულება გაიზრდება.

62
00:04:31,725 --> 00:04:35,634
ამ ტექნიკისთვის
Vendor Prefix-ებიც არ გვჭირდება.

63
00:04:35,634 --> 00:04:39,552
CSS-ის ანიმაციებითა და transition-ებით
მრავალი რამის გაკეთება შეიძლება,

64
00:04:39,552 --> 00:04:42,573
ბრაუზერები კი მათ
სწრფად აღიქვამს და ახორციელებს,

65
00:04:42,573 --> 00:04:45,480
ამიტომ გირჩევთ ორივე
უფრო დეტალურად გამოიკვლიოთ.