[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.85,0:00:04.48,Default,,0000,0000,0000,,შეიძლება ახლა იმაზე დავობთ თუ რა ჯობს,
Dialogue: 0,0:00:04.48,0:00:08.52,Default,,0000,0000,0000,,SetInterval-ის გამოყენება\Nთუ requestAnimationFrame-სი,
Dialogue: 0,0:00:08.52,0:00:13.90,Default,,0000,0000,0000,,მაგრამ მე კიდევ ერთ\Nვარიანტს შემოგთავაზებთ.
Dialogue: 0,0:00:13.90,0:00:17.16,Default,,0000,0000,0000,,Chrome-ში, Firefox-სა და IE10+-ში,
Dialogue: 0,0:00:17.16,0:00:21.58,Default,,0000,0000,0000,,არსებობს CSS-ით ანიმაციის შექმნის გზა,
Dialogue: 0,0:00:21.58,0:00:24.84,Default,,0000,0000,0000,,რისთვისაც ჯავასკრიპტი\Nსაერთოდ არ არის საჭირო.
Dialogue: 0,0:00:24.84,0:00:30.76,Default,,0000,0000,0000,,რაც დავწერეთ გავაკომენტაროთ\Nდა ვცადოთ Oh noes ანიმაციაზე.
Dialogue: 0,0:00:30.76,0:00:36.73,Default,,0000,0000,0000,,-- მოვაქციოთ მრავალხაზიან კომენტარში --
Dialogue: 0,0:00:36.73,0:00:41.05,Default,,0000,0000,0000,,დავიწყოთ გვერდისთვის\Nსტილის ტიპის დამატებით.
Dialogue: 0,0:00:41.05,0:00:44.76,Default,,0000,0000,0000,,შემდეგ კი დავუმატოთ\NCSS-ის წესის მსგავსი ხაზი,
Dialogue: 0,0:00:44.76,0:00:48.04,Default,,0000,0000,0000,,რომელიც რეალურად ჩვენი\Nანიმაციის განმარტება იქნება.
Dialogue: 0,0:00:48.04,0:00:55.29,Default,,0000,0000,0000,,დავწეროთ keyframes, შემდეგ კი\Nსახელი ჩვენი ანიმაციისთვის - getbigger,
Dialogue: 0,0:00:55.29,0:00:57.78,Default,,0000,0000,0000,,ბოლოს კი ფიგურული ფრჩხილები.
Dialogue: 0,0:00:57.78,0:01:01.36,Default,,0000,0000,0000,,უბრალო ანიმაციის გასაკეთებლად, რომელიც\Nერთი მდგომარეობიდან მეორეში გადადის,
Dialogue: 0,0:01:01.36,0:01:07.25,Default,,0000,0000,0000,,განვსაზღვროთ -დან და -მდე, ანუ from და to.
Dialogue: 0,0:01:07.25,0:01:12.36,Default,,0000,0000,0000,,from-ში დავწეროთ CSS-ის საწყისი პირობა.
Dialogue: 0,0:01:12.36,0:01:16.48,Default,,0000,0000,0000,,თუ გაიხსენებთ, დასაწყისში ეს 50px იყო.
Dialogue: 0,0:01:16.48,0:01:21.27,Default,,0000,0000,0000,,to-ში დავწეროთ საბოლოო პირობა.
Dialogue: 0,0:01:21.27,0:01:26.06,Default,,0000,0000,0000,,მაგალითად, იყოს 300px.
Dialogue: 0,0:01:26.06,0:01:29.67,Default,,0000,0000,0000,,რადგან ანიმაცია განვმარტეთ,\Nახლა ბრაუზერს უნდა ვუთხრათ,
Dialogue: 0,0:01:29.67,0:01:33.95,Default,,0000,0000,0000,,თუ რა ელემენტმა\Nუნდა გამოიყენოს ეს ანიმაცია.
Dialogue: 0,0:01:33.95,0:01:38.97,Default,,0000,0000,0000,,დავამატოთ ნორმალური\NCSS წესი Oh noes-სთვის,
Dialogue: 0,0:01:38.97,0:01:47.24,Default,,0000,0000,0000,,შიგნით მივუთითოთ\Nანიმაციის სახელი, getbigger,
Dialogue: 0,0:01:47.24,0:01:53.33,Default,,0000,0000,0000,,შემდეგ კი ანიმაციის\Nხანგრძლივობა, სამი წამი.
Dialogue: 0,0:01:53.33,0:01:55.83,Default,,0000,0000,0000,,იმის მიხედვით თუ რა ბრაუზერი გაქვთ,
Dialogue: 0,0:01:55.83,0:01:59.20,Default,,0000,0000,0000,,ზოგიერთი ალბათ ფიქრობთ\Nრომ მაგარია და ყველაფერი მუშაობს,
Dialogue: 0,0:01:59.20,0:02:03.68,Default,,0000,0000,0000,,სხვებისთვის კი, Safari,\NChrome, ალბათ ეს არ მუშაობს.
Dialogue: 0,0:02:03.68,0:02:09.97,Default,,0000,0000,0000,,ეს არის რაღაცის, სახელად\NVendor Prefix-ების დამსახურება.
Dialogue: 0,0:02:09.97,0:02:16.34,Default,,0000,0000,0000,,ზოგჯერ ბრაუზერი წყვეტს რაიმე\Nახალ თვისებას დაუჭიროს მხარი,
Dialogue: 0,0:02:16.34,0:02:19.47,Default,,0000,0000,0000,,მაგრამ ამ თვისებაზე\NVendor Prefix-ს განათავსებს,
Dialogue: 0,0:02:19.47,0:02:22.33,Default,,0000,0000,0000,,იმის ნიშნად, რომ შესაძლოა\Nეს მომავალში შეიცვალოს.
Dialogue: 0,0:02:22.33,0:02:25.53,Default,,0000,0000,0000,,ეს მხოლოდ ბრაუზერების\Nკავშირია თვისებასთან.
Dialogue: 0,0:02:25.53,0:02:29.26,Default,,0000,0000,0000,,თუ ეს Chrome-ში გვინდა\Nგავუშვათ და ჯერ არ მუშაობს,
Dialogue: 0,0:02:29.26,0:02:32.00,Default,,0000,0000,0000,,საჭიროა ყველაფრის კოპირება რაც გავაკეთეთ
Dialogue: 0,0:02:32.00,0:02:34.83,Default,,0000,0000,0000,,და წინ webkit-ის დაწერა.
Dialogue: 0,0:02:34.83,0:02:38.53,Default,,0000,0000,0000,,ესეიგი, ვაკოპირებთ ამ ნაწილს,
Dialogue: 0,0:02:38.53,0:02:41.74,Default,,0000,0000,0000,,აქ ვწერთ: -webkit-
Dialogue: 0,0:02:41.74,0:02:50.11,Default,,0000,0000,0000,,აქ კი ვაკოპირებთ ამას და\Nაქაც, ვწერთ -webkit-, -webkit-
Dialogue: 0,0:02:50.11,0:02:55.09,Default,,0000,0000,0000,,ძალიან კარგი, ახლა გამოსახულება\Nიზრდება, ნებისმიერი ბრაუზერისთვის.
Dialogue: 0,0:02:55.09,0:02:58.11,Default,,0000,0000,0000,,იმედია იმ დროსითვის როცა ამას უყურებთ,
Dialogue: 0,0:02:58.11,0:03:00.25,Default,,0000,0000,0000,,Vendor Prefix-ები აღარ იქნება საჭირო,
Dialogue: 0,0:03:00.25,0:03:02.90,Default,,0000,0000,0000,,მაგრამ კარგია მათი არსებობის ცოდნა,
Dialogue: 0,0:03:02.90,0:03:08.19,Default,,0000,0000,0000,,შესაძლოა ოდესმე\Nმათი თვისებები გამოგვადგეს.
Dialogue: 0,0:03:08.19,0:03:11.80,Default,,0000,0000,0000,,CSS-ში კიდევ ერთი გზა\Nარსებობს ანიმაციის გასაკეთებლად.
Dialogue: 0,0:03:11.86,0:03:14.71,Default,,0000,0000,0000,,ეს არის გადატანის თვისება.
Dialogue: 0,0:03:14.71,0:03:20.62,Default,,0000,0000,0000,,ეს ბრაუზერს მიუთითებს თუ\Nროგორ გადავიდეს ერთი თვისებიდან მეორეზე.
Dialogue: 0,0:03:20.62,0:03:28.44,Default,,0000,0000,0000,,ვთქვათ, გვინდა დარჩენილი დროის ფონტის ზომა\Nგაიზარდოს როცა მაუსს მასზე გადავატარებთ.
Dialogue: 0,0:03:28.44,0:03:32.91,Default,,0000,0000,0000,,შეგვიძლია ეს ჯავასკრიპტში გავაკეთოთ\Nმაუსთან დაკავშირებული eventListener-ით,
Dialogue: 0,0:03:32.91,0:03:36.88,Default,,0000,0000,0000,,შემდეგ კი requestAnimationFrame-ს\Nგამოყენებით გავზარდოთ ფონტის ზომა,
Dialogue: 0,0:03:36.88,0:03:42.10,Default,,0000,0000,0000,,მაგრამ ამის გაკეთება\Nმთლიანად CSS-შიც შეგვიძლია.
Dialogue: 0,0:03:42.10,0:03:48.79,Default,,0000,0000,0000,,ვნახოთ, როგორ შევვლიდით CSS-ში ფონტს ისე,\Nრომ მაუსის გატარებისას იგი გაზრდილიყო?
Dialogue: 0,0:03:48.79,0:03:51.13,Default,,0000,0000,0000,,შეგვიძლია გამოვიყენოთ hover,
Dialogue: 0,0:03:51.13,0:03:55.06,Default,,0000,0000,0000,,ვწერთ: #countdown:hover,
Dialogue: 0,0:03:55.06,0:03:59.97,Default,,0000,0000,0000,,შემდეგ კი font-size: 150px;
Dialogue: 0,0:03:59.97,0:04:02.95,Default,,0000,0000,0000,,ახლა ისღა დაგვრჩენია ბრაუზერს მივუთითოთ,
Dialogue: 0,0:04:02.95,0:04:06.68,Default,,0000,0000,0000,,რომ ფონტის ზომის თვისება ცვალოს.
Dialogue: 0,0:04:06.68,0:04:11.48,Default,,0000,0000,0000,,რამდენ ხანში გააკეთოს ეს და\Nდროის ათვლის რა ფუნქცია გამოვიყენოთ?
Dialogue: 0,0:04:11.48,0:04:19.33,Default,,0000,0000,0000,,ვამბობთ: transition: font-size 1s linear;
Dialogue: 0,0:04:19.33,0:04:25.88,Default,,0000,0000,0000,,დააპაუზეთ გაკვეთილი და\Nგადაატარეთ მაუსი ტექსტს, ნახეთ რა მოხდება.
Dialogue: 0,0:04:25.88,0:04:28.87,Default,,0000,0000,0000,,თუ Chrome-ში, Firefox-ში ან IE10+-ში ხართ,
Dialogue: 0,0:04:28.87,0:04:31.72,Default,,0000,0000,0000,,მაშინ გამოსახულება გაიზრდება.
Dialogue: 0,0:04:31.72,0:04:35.63,Default,,0000,0000,0000,,ამ ტექნიკისთვის\NVendor Prefix-ებიც არ გვჭირდება.
Dialogue: 0,0:04:35.63,0:04:39.55,Default,,0000,0000,0000,,CSS-ის ანიმაციებითა და transition-ებით\Nმრავალი რამის გაკეთება შეიძლება,
Dialogue: 0,0:04:39.55,0:04:42.57,Default,,0000,0000,0000,,ბრაუზერები კი მათ\Nსწრფად აღიქვამს და ახორციელებს,
Dialogue: 0,0:04:42.57,0:04:45.48,Default,,0000,0000,0000,,ამიტომ გირჩევთ ორივე\Nუფრო დეტალურად გამოიკვლიოთ.