Css da animatsiyalar bilan ishlash

CSS da animatsiyalar bilan ishlash.

1. 
   CSS-da animatsiya qanday yaratiladi.
   
2. 
   Animatsiya css misollari va tayyor kod.
   
3. 
   CSS3 da animatsiyalarni yuklash
   

Interfeysning boshiga qanchalik yaqin bo'lsak, u foydalanuvchi uchun shunchalik aniq bo'ladi. Hayotda deyarli hech narsa bir zumda sodir bo'lmaydi - yotishdan oldin bir quti gazlangan suvni ochish yoki ko'zimizni yumish, biz Internetda bo'lgani kabi keskin "ochiq / yopiq" emas, balki bir qator oraliq holatlarni kuzatamiz.
Animatsiya veb-saytlarga dinamizm beradi va ularning imkoniyatlarini tushunishni yaxshilaydi. U veb-sahifalarni jonlantiradi va foydalanuvchi bilan muloqot qilishda yordam beradi. CSS3 o'tishlaridan farqli o'laroq, CSS animatsiyalari asosiy kadrlarga asoslanadi. Bu sizga ma'lum vaqt davomida effektlarni o'ynash va takrorlash, shuningdek, tsikl ichidagi animatsiyani avtomatik ravishda to'xtatish imkonini beradi.
Animatsiya - bu CSS-da saqlangan asosiy kadrlar yoki asosiy kadrlar to'plami: @keyframes animatsiya testi (0% (kengligi: 100px;) 100% (kengligi: 200px;))
Keling, bu erda nima sodir bo'layotganini ko'rib chiqaylik. @keyframes kalit so'zi animatsiyaning o'zini bildiradi. Keyin animatsiya nomi keladi, bizning holatimizda animatsiya-test. Jingalak qavslar asosiy kadrlar ro'yxatini o'z ichiga oladi. Biz 0% boshlang'ich kadrdan va 100% yakuniy kadrdan foydalanamiz (ular ham dan vagacha yozilishi mumkin).
Quyidagi kodni ko'rib chiqing. Animatsiyani quyidagi tarzda sozlash mumkin: @keyframes animatsiya testi (kengligi: 0;) 25% (kengligi: 75px;) 75% (kengligi: 150px;) dan (kengligi: 100%;))
Esda tutingki, agar boshlang'ich yoki tugatish freymlari ko'rsatilmagan bo'lsa, brauzer ularga animatsiya qo'llanilmagandek avtomatik ravishda ularni aniqlaydi.
Siz animatsiyani quyidagi kabi elementga ulashingiz mumkin: Element-selektor (animatsiya-nomi: sizning-animatsiya-nomingiz; animatsiya-davomiyligi: 2,5s;)
Animatsiya nomi xususiyati @keyframes animatsiyasi nomini belgilaydi. Animatsiya davomiyligi qoidasi animatsiyaning davomiyligini soniyalarda (1s, 30s, .5s) yoki millisekundlarda (600ms, 2500ms) belgilaydi.
Shuningdek, asosiy kadrlarni guruhlashingiz mumkin: @keyframes animatsiya-testi (0%, 35% (kengligi: 50px;) 75% (kengligi: 200px;) 100% (kengligi: 100%;))
Bitta elementga (selektor) bir nechta animatsiya qo'llanilishi mumkin. Ularning nomlari va parametrlari ularni qo'llash tartibida qayd etilishi kerak: Element-selektor (animatsiya-nomi: animatsiya-nomi-1, animatsiya-nomi-2; animatsiya-davomiyligi: 1s, 3s;)