შეიძლება ახლა იმაზე დავობთ თუ რა ჯობს,

SetInterval-ის გამოყენება
თუ requestAnimationFrame-სი,

მაგრამ მე კიდევ ერთ
ვარიანტს შემოგთავაზებთ.

Chrome-ში, Firefox-სა და IE10+-ში,

არსებობს CSS-ით ანიმაციის შექმნის გზა,

რისთვისაც ჯავასკრიპტი
საერთოდ არ არის საჭირო.

რაც დავწერეთ გავაკომენტაროთ
და ვცადოთ Oh noes ანიმაციაზე.

-- მოვაქციოთ მრავალხაზიან კომენტარში --

დავიწყოთ გვერდისთვის
სტილის ტიპის დამატებით.

შემდეგ კი დავუმატოთ
CSS-ის წესის მსგავსი ხაზი,

რომელიც რეალურად ჩვენი
ანიმაციის განმარტება იქნება.

დავწეროთ keyframes, შემდეგ კი
სახელი ჩვენი ანიმაციისთვის - getbigger,

ბოლოს კი ფიგურული ფრჩხილები.

უბრალო ანიმაციის გასაკეთებლად, რომელიც
ერთი მდგომარეობიდან მეორეში გადადის,

განვსაზღვროთ -დან და -მდე, ანუ from და to.

from-ში დავწეროთ CSS-ის საწყისი პირობა.

თუ გაიხსენებთ, დასაწყისში ეს 50px იყო.

to-ში დავწეროთ საბოლოო პირობა.

მაგალითად, იყოს 300px.

რადგან ანიმაცია განვმარტეთ,
ახლა ბრაუზერს უნდა ვუთხრათ,

თუ რა ელემენტმა
უნდა გამოიყენოს ეს ანიმაცია.

დავამატოთ ნორმალური
CSS წესი Oh noes-სთვის,

შიგნით მივუთითოთ
ანიმაციის სახელი, getbigger,

შემდეგ კი ანიმაციის
ხანგრძლივობა, სამი წამი.

იმის მიხედვით თუ რა ბრაუზერი გაქვთ,

ზოგიერთი ალბათ ფიქრობთ
რომ მაგარია და ყველაფერი მუშაობს,

სხვებისთვის კი, Safari,
Chrome, ალბათ ეს არ მუშაობს.

ეს არის რაღაცის, სახელად
Vendor Prefix-ების დამსახურება.

ზოგჯერ ბრაუზერი წყვეტს რაიმე
ახალ თვისებას დაუჭიროს მხარი,

მაგრამ ამ თვისებაზე
Vendor Prefix-ს განათავსებს,

იმის ნიშნად, რომ შესაძლოა
ეს მომავალში შეიცვალოს.

ეს მხოლოდ ბრაუზერების
კავშირია თვისებასთან.

თუ ეს Chrome-ში გვინდა
გავუშვათ და ჯერ არ მუშაობს,

საჭიროა ყველაფრის კოპირება რაც გავაკეთეთ

და წინ webkit-ის დაწერა.

ესეიგი, ვაკოპირებთ ამ ნაწილს,

აქ ვწერთ: -webkit-

აქ კი ვაკოპირებთ ამას და
აქაც, ვწერთ -webkit-, -webkit-

ძალიან კარგი, ახლა გამოსახულება
იზრდება, ნებისმიერი ბრაუზერისთვის.

იმედია იმ დროსითვის როცა ამას უყურებთ,

Vendor Prefix-ები აღარ იქნება საჭირო,

მაგრამ კარგია მათი არსებობის ცოდნა,

შესაძლოა ოდესმე
მათი თვისებები გამოგვადგეს.

CSS-ში კიდევ ერთი გზა
არსებობს ანიმაციის გასაკეთებლად.

ეს არის გადატანის თვისება.

ეს ბრაუზერს მიუთითებს თუ
როგორ გადავიდეს ერთი თვისებიდან მეორეზე.

ვთქვათ, გვინდა დარჩენილი დროის ფონტის ზომა
გაიზარდოს როცა მაუსს მასზე გადავატარებთ.

შეგვიძლია ეს ჯავასკრიპტში გავაკეთოთ
მაუსთან დაკავშირებული eventListener-ით,

შემდეგ კი requestAnimationFrame-ს
გამოყენებით გავზარდოთ ფონტის ზომა,

მაგრამ ამის გაკეთება
მთლიანად CSS-შიც შეგვიძლია.

ვნახოთ, როგორ შევვლიდით CSS-ში ფონტს ისე,
რომ მაუსის გატარებისას იგი გაზრდილიყო?

შეგვიძლია გამოვიყენოთ hover,

ვწერთ: #countdown:hover,

შემდეგ კი font-size: 150px;

ახლა ისღა დაგვრჩენია ბრაუზერს მივუთითოთ,

რომ ფონტის ზომის თვისება ცვალოს.

რამდენ ხანში გააკეთოს ეს და
დროის ათვლის რა ფუნქცია გამოვიყენოთ?

ვამბობთ: transition: font-size 1s linear;

დააპაუზეთ გაკვეთილი და
გადაატარეთ მაუსი ტექსტს, ნახეთ რა მოხდება.

თუ Chrome-ში, Firefox-ში ან IE10+-ში ხართ,

მაშინ გამოსახულება გაიზრდება.

ამ ტექნიკისთვის
Vendor Prefix-ებიც არ გვჭირდება.

CSS-ის ანიმაციებითა და transition-ებით
მრავალი რამის გაკეთება შეიძლება,

ბრაუზერები კი მათ
სწრფად აღიქვამს და ახორციელებს,

ამიტომ გირჩევთ ორივე
უფრო დეტალურად გამოიკვლიოთ.