ანიმირებული გადასვლები CSS - ში
ძოგიერთ მათგანს ჩვენ ახლა განვიხილავთ.
- ფერის ნელი ცვლა
- ნელი ქრობა
- ნელი გადიდება — დაპატარავება
- ნელი გადაადგილება
- ნელი ტრიალი
CSS3 - ში გაჩნდა ახალი ფუნქციები, რომელთა დახმარებითაც შეიძლება მთელი ანიმაციების კეთება. ბრაუზერების შემქმნელები ცდილობენ არ ჩამორჩნენ და იყვნენ მოწინავენი ყოველივე ამაში და აკეთებენ ამისათვის ყველაფერს, რომ ყველა ახალი ფუნქცია კარგად და გამართულად მუშაობდეს . თუმცა ყველა ბრაუზერი ერთნაირად კარგად არ მუშაობს და ამის შესახებ მოგვიანებით ვისაუბრებთ.
ფერების ნელი ცვლა
მაგალითისათვის შევქმნათ HTML დოკუმენტი და ჩავსვათ მასში ბლოკი div
ფერის ნელი ცვლა ხდება ფუნქცია transition - ის გამოყენების ხარჯზე, რაც თარგმანში გადასვლას ნიშნავს. და ეს გადასვლა 1 წამის განმავლობაში ხდება, როგორც არის მითითებული. Linear შესაძლებელია შევცვალოთ ease - ით და გადასვლა უფრო სწრაფი იქნება. ნახეთ მაგალითი.
ნელი ჩაქრობა
CSS კოდი თითქმის იგივეა, მხოლოდ თვისებებას მიუთითებთ — all, ანუ ყველაფერს რაც მიჰყვება ფსევდო კლასს hover, მიენიჭება ნელი გადასვლა. ჩვენს შემთხვევაში ეს მელი ჩაქრობაა. ბლოკი შეიცვლის გამჭვირვალეობას კურსორის მიტანისას ელემენტზე 50%.- ით
ნელი გადიდება
ამ ვარიანტში ყველაფერი იგივეა. მხოლოდ აქ გამოყენებულია თვისება linear - ი ease ს ნაცვლად. დავაყენოთ ფსევდოკლასი hover სიგრძე და სიგანე, ორიგინალური ზომებისაგან განსხვავებული.
ნელი გადაადგილება
აქ მნიშვნელობებს დავუწერთ ფსევდოკლასს, გამოვიყენებთ თვისებას transform.
დაწერილი ნიშნავს რომ, კურსორის მიტანისას ობიექტზე ხდება მისი გადაადგილება მარცხნივ 50 პიქსელით.
ნელი ბრუნი
ეს ნიშნავს რომ, ობიექტი დატრიალდება 180° - ით საათის ისრის მიმართულებით
რაც შეეხება ბრაუზერებს. Opera, Mozilla, Chrome მშვენივრად მუშაობენ, მაგრამ Internet Explorer ის ცოტა არ იყოს უჭირს. ამ სიახლეების გაგება და მისი შემქმნელები როგორც ჩანს, ჯერ არ ფიქრობენ მის განახლებას.