6-bo'lim. Css yordamida animatsiya qurish css3-animatsiya saytlarga dinamiklik baxsh etadi, veb-sahifani jonlantiradi va foydalanuvchi bilan muloqotni yaxshilaydi

6-bo'lim. CSS yordamida animatsiya qurish
CSS3-animatsiya saytlarga dinamiklik baxsh etadi, veb-sahifani jonlantiradi va foydalanuvchi bilan muloqotni yaxshilaydi. CSS3-o'tkazgichlardan farqli ravishda animatsiya yaratish avtomatik ishga tushirish va effektlarni berilgan vaqt oralig'ida takrorlash hamda animatsiyani sikl ichida to'xtatish imkonini beradigan kalit kadrlarda joylashadi.
CSS3-animatsiya amalda barcha html-elementlarga hamda :before va : after psevdoelementlarga qo'llanilishi mumkin. Animatsiyalanuvchi xususiyatlar ro'yxati bilan https://developer. mozilla.org/en-US/docs/Web/CSS/CSS animated_properties manzilida tanishish mumkin. Animatsiya yaratishda ishlash tezligining pasayishini hisobga olish lozim.
Kalit kadrlardan animatsiyaning turli nuqtalarida animatsiya xususiyatlarining qiymatini ko'rsatishda foydalaniladi. Kalit kadrlar animatsiyaning bitta siklini aniqlaydi. Animatsiya bir yoki bir necha marła takrorlanishi mumkin.
Kalit kadrlar @keyframes qoidasi bilan ko'rsatiladi va (CSS kodida) quyidagicha aniqlanadi: @keyframes animatsiya nomi { qoidalar ro'yxati }
Animatsiya yaratish @keyframes qoidalarida kalit kadrlarni o'rnatishdan boshlanadi. Kadrlar qaysi xususiyat qaysi qadamda animatsiyalanishini aniqlaydi. Har bir kadr bir yoki bir nechta qismlardan tashkil topishi hamda har bir qismda bir yoki bir nechta xusisyat va qiymatlar juftligini e'lon qilinishi mumkin. @keyframes qoidasida animatsiya elementi nomi qoidalarni elementning e'lon qilish qismi bilan bog'laydi. CSSda yozilishi kodi:
@keyframes shadow { from {text-shadow: 0 0 3px black;} 50% {text-shadow: 0 0 30px black;} to {text-shadow: 0 0 3px black;}
Kalit kadrlar from va to (0% va 100% qiymatlariga ekvivalent) kalit so'zlari bilan yoki istalgancha marła yoziladigan foizli bandlar bilan hosil qilinadi. Shuningdek, kalit soz'lar va foizli bandlarni birlashtirish mumkin. Agar kadrlar bir xil xususiyat va qiymatlarga ega bo'lsa ularni bitta qilib e'lon qilish mumkin: @keyframes move { from, to { top: 0; left: O;
25%,
75% {top: 100%;}
{top: 50%;}
Agar 0% yoki 100% kadrlar ko'rsatilmagan bo'lsa, foydalanuvchi brauzeri o'zi hosil qiladi.
Agar @keyframes bir nechta qoidalariga bir xil nom berilgan bo'lsa so'nggi yozilgani ishlaydi.
@keyframes qoidasi e'lon qilingandan so'ng biz unga animation xususiyati orqali murojaat qilamiz: CSSda yozilishi kodi:
hl { font-size: 3.5em; color: darkmagenta; animation: shadow 2s infinite ease-in-out;
Sonli bo'lmagan qiymatlarni animatsiyalash tavsiya etilmaydi. Shuningdek, xususiyatlarning qiymatlari o'rta nuqtasiga ega bo'lmagan kalit kadrlarni qurish mumkin emas. Masalan, color: pink va color: #ffffff; width: auto va width: 100px border-radius: 0 va border-radius: 50% (bu yerda border-radius: 0% deb ko'rsatish joiz).
6.1-misol. CSS yordamida veb-sahifada kvadrat rangining o'zgarishi animatsiyasi qurilsin. Joriy papkada notepad (Bloknot) dasturida yangi css anime61.html faylini yarating va quyidagi kodlarni kiriting va saqlang:
Dastlab, HTML hujjatda DIV elementini hosil qilamiz.