Css3 animatsiyasidan qanday foydalanish mumkin: o'rgatuvchi, namunaviy kodlar va misollar

CSS3 animatsiyasidan qanday foydalanish mumkin: o'rgatuvchi, namunaviy kodlar va misollar

Maqola muallifi: Rochesterda Oliveira

• 
   Veb-sayt dizayni
  
• 
   Yangilandi: Yanvar 28, 2013
  

• 
  Facebook
  
• 
  Twitter
  
• 
  Pinterest
  
• 
  LinkedIn
  

Biz JS va jQuery'dan foydalanganimizda biz animatsiyalar ustidan to'liq nazorat qilamiz va biz ajoyib ta'sirlar yaratishimiz mumkin, lekin narx ancha yuqori. Jarayon vaqtini, o'zaro faoliyat brauzerlarning muvofiqligi (masalan, mobil qurilmalar JSga nisbatan ancha farq qiladi) va kod murakkabligi o'zi animatsion interfeyslarni yaratishda yodda tutish kerak bo'lgan fikrlar.

Shunday qilib, bugungi kunda biz JSni CSS ko'rsatuvlari va Transitions yordamida qanday qilib oldini olishni ko'rib chiqamiz. Biz juda muhim bosqichlardan akkordeon panellari va jonlantirilgan sub menyular kabi ajoyib ta'sirlarni muhokama qilamiz.

Joyni, bloknotni va haqiqiy brauzerni (IEdan boshqa narsa) oling va boshlaylik.

Isitish

CSS animatsiyalaridan foydalanishda bizda bir nechta afzalliklar (va hayotimizda mavjud bo'lgan har qanday kamchiliklar) mavjud. Agar siz xo'jayiningizga yoki mijozingizga bu narsalarni sotishingiz kerak bo'lsa, bu nimani yodda saqlash kerak:

• 
  Ular potensial tezroq, chunki ular apparat tezlashmasidan foydalanishlari mumkin (HTML5 ilovalari sifatida)
  
• 
  Ular mobil qurilmalarda yaxshiroq ishlashadi va teginish voqealarini kuzatish uchun maxsus kodni talab qilmaydi
  
• 
  XS brauzer tomonidan talqin qilinishi kerak va brauzerni ochish imkoniyati juda katta. Shunday qilib, CSS muvaffaqiyatsizlikka uchraganida, JS butun sahifani sindira olishi mumkin
  
• 
  Ular juda yaxshi brauzerni qo'llab-quvvatlashiga ega (bu sayt sizga maxsus statistikani tekshirishga yordam beradi: http://caniuse.com/#search )
  

CSS3 animatsiyasi misollar

Ushbu xabarni tayyorlashni boshlashdan oldin, toza CSS-da yaratilgan bir nechta chiroyli animatsiyalarni ko'rib chiqamiz.

Sof CSS-ning Twitter Fail Whale

 Steven Dennis tomonidan tayyorlangan, buni amalda ko'rish.

Sofdagi CSS-ni ixchamlash mumkin

 Roman Cortes tomonidan tayyorlangan, buni amalda ko'rish.