Ishlay boshlagan interfeysga qanchalik yaqin bo'lsak, u foydalanuvchi uchun shunchalik tushunarli bo'ladi. Hayotda deyarli hech narsa bir zumda sodir bo'lmaydi - yotishdan oldin bir banka soda ochganda yoki yotishdan oldin ko'zimizni yumganda, biz Internetda bo'lgani kabi keskin "ochiq / yopiq" emas, balki bir qator oraliq holatlarni kuzatamiz.

Maqolamda men CSS animatsiyasi va u bilan qanday ishlash haqida o'z bilimlarim bilan o'rtoqlashaman. Animatsiya veb-saytlarga dinamizm beradi va ularning imkoniyatlarini tushunishni yaxshilaydi. U veb-sahifalarni jonlantiradi va foydalanuvchilarning o'zaro munosabatiga yordam beradi. CSS3 o'tishlaridan farqli o'laroq, CSS animatsiyalari kalit kadrlarga asoslangan. 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 saqlanadigan asosiy kadrlar yoki kalit kadrlar to'plami:

@keyframes animatsiya-testi (0% (kengligi: 100px; ) 100% (kengligi: 200px; ))

Keling, bu erda nima 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 (ularni dan vagacha yozish ham mumkin).
Quyidagi kodni ko'rib chiqing. Animatsiya ham shunday o'rnatilishi mumkin:

@keyframes animatsiya-testi ( dan ( eni: 0; ) 25% (kengligi: 75px; ) 75% (kengligi: 150px; ) dan (kengligi: 100%; ) )

Esda tutingki, agar boshlang'ich yoki tugatish ramkasi ko'rsatilmagan bo'lsa, brauzer ularni avtomatik ravishda aniqlaydi, go'yo ularga hech qanday animatsiya qo'llanilmagan.

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.

Siz shuningdek asosiy kadrlarni guruhlashingiz mumkin:

@keyframes animatsiya-testi ( 0%, 35% (kenglik: 50px; ) 75% (kenglik: 200px; ) 100% (kenglik: 100%; ) )

Bitta elementga bir nechta animatsiyalarni qo'llashingiz mumkin (selektor). Ularning nomlari va parametrlari ariza berish tartibida yozilishi kerak:

Element-selektor (animatsiya-nomi: animatsiya-nomi-1, animatsiya-nomi-2; animatsiya-davomiyligi: 1s, 3s; )

Animatsiya kechikishi:

Animatsiyani kechiktirish xususiyati animatsiya ijro etilishidan oldin kechikishni soniya yoki millisekundlarda belgilaydi:

Element-selektor (animatsiya-nomi: anim-nom-1; animatsiya-davomiyligi: 3s; animatsiya-kechikish: 2s; /* animatsiya boshlanishidan oldin 2 soniya o'tadi */ )

Animatsiyani takrorlash:

Animatsiya-iterasion-count-dan foydalanib, biz animatsiya necha marta takrorlanishini belgilashimiz mumkin: 0, 1, 2, 3 va hokazo. Yoki aylanish uchun cheksiz:

Element-selektor (animatsiya-nomi: animatsiya-nomi-1; animatsiya-davomiyligi: 3s; animatsiya-kechikish: 4s; animatsiya-iteratsiya-hisoblash: 5; /* animatsiya 5 marta ijro etiladi */ )

Animatsiyadan oldin va keyin element holati:

Animatsiyani to‘ldirish rejimi xususiyatidan foydalanib, element animatsiya boshlanishidan oldin va u tugagandan keyin qanday holatda bo‘lishini belgilash mumkin:

animatsiyani to'ldirish rejimi: oldinga;- animatsiya elementi tugallangandan/ijrodan keyin oxirgi asosiy kadr holatida bo'ladi;

a nimation-to'ldirish rejimi: orqaga;- element birinchi kalit kadr holatida bo'ladi;

animatsiyani to'ldirish rejimi: ikkalasi ham; - animatsiya boshlanishidan oldin element birinchi asosiy kadr holatida bo'ladi, tugagandan so'ng - oxirgisi.

Animatsiyani boshlash va to'xtatish:

Bu ikki qiymatni qabul qilishi mumkin bo'lgan animation-play-state xususiyatining javobgarligi: ishlayotgan yoki to'xtatilgan.

Element-selektor: hover (animatsiya-o'yin holati: to'xtatildi; )

Animatsiya yo'nalishi:

Animatsiya yo‘nalishi xususiyati animatsiya o‘ynaladigan yo‘nalishni qanday boshqarishni belgilaydi. Bu erda mumkin bo'lgan qiymatlar:

animatsiya yo'nalishi: normal; - animatsiya to'g'ridan-to'g'ri tartibda ijro etiladi;

animatsiya yo'nalishi: teskari; - animatsiya teskari tartibda, dan boshlab;

animatsiya yo'nalishi: muqobil;- juft animatsiya takrorlari teskari tartibda, toq bo'lganlar - oldinga tartibda o'ynaladi;

animatsiya yo'nalishi: muqobil-teskari; - g'alati animatsiya takrorlari teskari tartibda, hatto - oldinga tartibda o'ynaladi.

Animatsiyalangan kadrlarning silliq chiqishi funktsiyasi:

Animatsiya-vaqt-funksiya xususiyati animatsiyani ijro etish tezligi uchun mas'ul bo'lgan maxsus funktsiyani o'rnatish imkonini beradi. Odatiy bo'lib, animatsiya sekin boshlanadi, tez tezlashadi va oxirida sekinlashadi. Hozirda bizda quyidagi oldindan belgilangan qiymatlar mavjud: chiziqli, yengillik, yengillik, yengillik, yengillik, bosqichma-bosqich, bosqichma-bosqich.

Biroq, bunday funktsiyalarni o'zingiz yaratishingiz mumkin. Ma'nosi animatsiya-vaqt-funktsiyasi: kubik-bezier (P1x, P1y, P2x, P2y); kirish sifatida 4 ta argumentni oladi va animatsiya jarayoni uchun tarqatish egri chizig'ini yaratadi.

Siz batafsilroq o'rganishingiz yoki veb-saytda ushbu funktsiyalarni yaratishni sinab ko'rishingiz mumkin http://cubic-bezier.com

Va nihoyat, animatsiya qadamlar soni va yo'nalishini (boshlash yoki tugatish) kiritish sifatida qabul qiluvchi qadamlar funktsiyasidan foydalangan holda individual qiymatlar (qadamlar) to'plamiga bo'linishi mumkin. Quyidagi misolda animatsiya 5 bosqichdan iborat bo'lib, oxirgisi animatsiya tugashidan oldin sodir bo'ladi:

Element-selektor ( animatsiya-nomi: animatsiya-nomi-1; animatsiya-davomiyligi: 3s; animatsiya-kechikish: 5s; animatsiya-iteratsiya-hisob: 3; animatsiya-vaqt-funksiyasi: qadamlar(5, tugatish); )

Animatsiya uchun brauzerni qo'llab-quvvatlash:

Jadvaldagi qiymatlar xususiyatni to'liq qo'llab-quvvatlaydigan birinchi brauzer versiyasini ko'rsatadi.

-webkit-, -moz- yoki -O- bilan qiymatlar prefiks bilan ishlagan birinchi versiyani bildiradi.

Https://www.w3schools.com veb-saytida Siz CSS animatsiyasini batafsil o'rganishingiz mumkin (misollar bilan).
Animatsiyalar bilan ishlash uchun mashhur kutubxonalardan biri animate.css.

CSS animatsiyalari bilan ishlashda duch keladigan qiyinchiliklar oqlanmagandek tuyulishi mumkin. Ammo bu mutlaqo to'g'ri emas.

Birinchidan, CSS interfeysning foydalanuvchi tajribasini yaxshilash uchun kuchli vositadir. Bu foydalanuvchi unumdorligiga katta ta'sir ko'rsatmaydi. JavaScript analoglaridan farqli o'laroq. Texnologiya, foydalanish orqali hisoblash quvvati GPU brauzerlarga elementlarning renderlash tezligini tezda optimallashtirish imkonini beradi.

Ikkinchidan, CSS animatsiyalarini amalga oshirishning moslashuvchanligi, tezligi va qulayligi mavjud yoki yangi interfeyslarda "hayotdan nafas olish" ga yordam beradi. Umumiy va original yondashuvlarni ishlab chiqish va texnologiyaning o'ziga xos xususiyatlarini tushunib, siz deyarli barcha loyihalar uchun noyob foydalanish interfeyslarini yaratishingiz mumkin.

Umid qilamanki, siz maqolada topdingiz foydali ma'lumotlar O'zingiz uchun. Hammaga chiroyli saytlar. Animatsiyalar haqida unutmang :)

DIQQAT! Ushbu darsda biz animatsiyani tahlil qilamiz, shuning uchun men sizga rasmlarda uning ishining misolini ko'rsata olmayman, shuning uchun kod muharririni oching va ushbu maqolada keltirilgan kodni u erda yozing.

Yaratilish asoslari

Shunday qilib, birinchi navbatda, uni qanday yaratishni boshlashingiz kerak. Ehtimol, siz CSS-dagi har qanday narsa kerakli selektorga tegishli qiymatlar bilan kerakli xususiyatlarni belgilash orqali amalga oshirilishiga o'rganib qolgansiz. Shunday qilib, animatsiya yaratishda bu etarli emas. Diagramma quyidagicha ko'rinadi:

O'tish effektlarining o'zi @keyframes yordamida yaratilgan

Kerakli elementga xuddi shu animatsiya, shuningdek uning parametrlari (bularning barchasi xususiyatlar va ularning qiymatlari yordamida) beriladi.

Shunday qilib, birinchi navbatda @keyframes-dagi kerakli o'zgarishlarni tasvirlashimiz kerak, keling, ular bilan qanday ishlashni batafsil ko'rib chiqamiz.

@keyframes sintaksisi

Aslida, menga juda oddiy bo'lsa-da, tayyor misol yordamida sizga hamma narsani tushuntirish osonroq bo'ladi. Mana (kod CSS fayliga qo'shilgan):

@keyframes pulse( 0%(shrift oʻlchami: 50px;) 50%(shrift oʻlchami: 60px;)) 100%(shrift oʻlchami: 50px;))

@keyframes zarbasi ( 0% (shrift oʻlchami: 50px;) 50% (shrift hajmi: 60px;))

Shunday qilib, @keyframes kalit so'zidan keyin animatsiya nomi sifatida ishlaydigan ixtiyoriy so'z mavjud. Bizning holatlarimizda bu "puls". Keyinchalik, kerakli qoidalar yozilgan jingalak qavslarni oching.

Foizlar - belgilangan xususiyatlar elementga qo'shiladigan vaqt belgilari. Bizning holatda, yozilgan narsa quyidagilarni anglatadi: bajarish boshida shrift o'lchami 50 piksel bo'ladi, o'rtada u 60 ga ko'tariladi va oxirida yana boshlang'ich o'lchamiga tushadi.

From va to kalit so'zlari foizli yozuvni almashtirishi mumkin; ular mos ravishda 0% va 100%, ya'ni ijroning boshi va oxirini bildiradi.

Animatsiyani harakatga keltirish

Hozircha bizda animatsiya effektini yaratuvchi kod bor, lekin u hech qayerda ishlatilmaydi. Agar siz veb-sahifangizni yangilasangiz, hech narsa o'zgarmaydi. Shunga ko'ra, animatsiyani qo'llash uchun siz ikki bosqichni bajarishingiz kerak:

U qo'llaniladigan elementni tanlang

Uni @keyframes (nomi orqali) orqali tasvirlangan qoidalarga bog'lang va o'rnating qo'shimcha sozlamalar agar kerak bo'lsa.

Kel urinib ko'ramiz

Html faylimda oddiy matn qatorini o'z ichiga olgan soya sinfi bilan blok yaratdim. Bizning maqsadimiz, avvalroq tasvirlangan animatsiya effektlarini qo'llashdir matn elementi.

Har bir narsa ishlashi uchun bu holatda ko'rsatilishi kerak bo'lgan ikkita talab qilinadigan xususiyat mavjud. Birinchidan, bu biz kalit kadrlarda yozgan nom. Ikkinchidan, bu animatsiyaning davomiyligi, chunki bu parametrsiz brauzer uni o'ynay olmaydi.

Shunday qilib, bizning blokimiz allaqachon mavjud bo'lgan uslublarga qo'shimcha ravishda, biz yangilarini qo'shamiz:

animatsiya nomi: puls; animatsiya davomiyligi: 2s;

Shunday qilib, hamma narsa 4 marta takrorlanadi va keyin to'xtatiladi. Siz tushunganingizdek, to'rtta o'rniga istalgan raqamni kiritishingiz mumkin.

Css3 ichida cheksiz animatsiya

Xuddi shu xususiyat yordamida juda oson amalga oshiriladi. Aslida, siz takrorlash sonini bir necha mingga o'rnatishingiz mumkin, bu etarli bo'ladi, ammo nazariy jihatdan bizning animatsiyamiz cheksiz takrorlanmaydi.

animatsiya-iteratsiya-hisoblash: cheksiz;

animatsiya - takrorlash - hisoblash: cheksiz;

Mana, endi biz cheksiz takrorlashni qildik. Men butun umringiz davomida monitor ortida o'tirgandan keyin bu haqiqat yoki yo'qligini tekshirishni tavsiya etmayman. Bu shunchaki ta'sir doimiy ravishda takrorlanishini va yo'qolmasligini xohlagan hollarda qo'llaniladi. Agar u ko'zga tashlanmaydigan bo'lsa va foydalanuvchini chalg'itmasa, unda nima uchun.

Boshlashdan oldin kechikish

Odatiy bo'lib, o'ynatish sahifa to'liq yuklangandan keyin boshlanadi. Ushbu xatti-harakatni animatsiya-kechikish xususiyati yordamida boshqarish mumkin. Uning qiymati soniyalarda ko'rsatilgan.

Yo'nalish

Yana bir qiziqarli xususiyat - animatsiya yo'nalishi. Odatiy bo'lib, u normal holatga o'rnatiladi; agar siz uni teskari holatga o'rnatsangiz, tasvirlangan barcha ramkalar teskari yo'nalishda bajariladi. Keling, qanday farq borligini tekshirib ko'raylik. Buning uchun men boshqa ramka qo'shish orqali effektni biroz o'zgartirdim.

@keyframes pulse( 0%(shrift oʻlchami: 50px;) 50%(shrift oʻlchami: 60px;) 70%(shrift oʻlchami: 80px;) 100%(shrift oʻlchami: 50px;))

@keyframes zarbasi ( 0% (shrift oʻlchami: 50px;) 50% (shrift oʻlchami: 60px;) 70% (shrift oʻlchami: 80px;) 100% (shrift o'lchami: 50px;))

Shunday qilib, normal yo'nalish bilan, animatsiyaning birinchi yarmida shrift o'lchami 60 pikselgacha ko'tariladi, keyin yana keskin oshib, 80 ga etadi, shundan so'ng u asl holatiga qaytadi.

Guruch. 2. Asl matn hajmi

Guruch. 3. Shrift o'lchami animatsiyaning deyarli oxirida, to'satdan asl holatiga qaytishdan oldin.

Endi biz so'raymiz:

animatsiya yo'nalishi: teskari;

animatsiya - yo'nalish: teskari;

Hammasi ostin-ustun bo'ldi. Birinchidan, matn 30 pikselgacha, 80 gacha ko'tariladi va animatsiyaning qolgan qismida u asta-sekin kamayadi va oxir-oqibat avvalgi hajmiga qaytadi. Hammasi oddiy.

Animatsiya shakli

Va bu, ehtimol, siz uzoq vaqt davomida tajriba qilishingiz mumkin bo'lgan eng qiziqarli sozlamalardan biridir. Odatiy bo'lib, barcha o'zgarishlar bir xil tezlikda amalga oshiriladi. Ushbu turdagi animatsiya chiziqli deb ataladi va undan tashqari boshqalar ham bor.

Assalomu alaykum, do'stlar! Bugun biz juda qiziqarli mavzuni ko'rib chiqamiz - haqiqiy misol yordamida CSS animatsiyalarini yaratish. Ushbu qo'llanmaning yakuni Million Dollar logotipining chiroyli CSS animatsiyasini yaratish bo'ladi.

Ajoyib

Qoqmoq

Dars materiallari

• Manbalar: Yuklab olish
• Darsdan asosiy misol: https://codepen.io/agragregra/pen/PKNavm
• Darsdan boshlang'ich shablon: https://github.com/agragregra/optimizedhtml-start-template

Bir oz nazariya

Animatsion misol yaratishni boshlashdan oldin, siz asosiy narsalarni ko'rib chiqishingiz kerak CSS animatsiyalari, asosiy atamalar, xususiyatlar va qoidalarni ko'rib chiqing CSS yaratish animatsiyalar.

Agar sizda Adobe After Effects yoki eski Flash Professional (hozir) kabi har qanday ilovalarda animatsiya yaratish tajribangiz bo'lsa. Adobe Animate), u holda siz "Asosiy kadrlar", "Vaqtinchalik funktsiyalar yoki harakat dinamikasi" kabi tushunchalar bilan tanishishingiz kerak, ular animatsiyaning boshqa sohalarida bo'lgani kabi, CSS-dan foydalangan holda sahifadagi elementlarning animatsiyasiga ham tegishli. Biroq, dastur interfeyslari bilan ishlashdan farqli o'laroq, siz muharrirda kod yozish orqali CSS animatsiyalaringizni yaratasiz.

CSS qoidasi @keyframes

CSS animatsiyasini yaratish blokdagi animatsiya nomini e'lon qilishdan boshlanadi @keyframes va animatsiya bosqichlari yoki asosiy kadrlar deb ataladigan narsalarni aniqlash.

Nazariya va asoslarni ko'rib chiqish uchun biz sof CSS-dan foydalanamiz va keyinroq murakkabroq misoldan foydalanib, Sass preprotsessoridan foydalanamiz. Darsda Sass haqida ko'proq bilib olishingiz mumkin. Bundan tashqari, CSS asoslarini chuqurroq tushunish uchun men "CSS asoslari - Kichkintoylar uchun qo'llanma" va "Barcha CSS selektorlari bitta darsda" darslarini o'qishni tavsiya qilaman.

@keyframes tuzilishini va kalit kadrlar bilan ishlashni ko'rib chiqamiz oddiy misol:

@keyfreymlarni aylantirish ( 0% (chegara radiusi: 0 0 0 0; transform: aylantirish(0deg); ) 25% (chegara radiusi: 50% 0 0 0; aylantirish: aylantirish(45deg); ) 50% ( chegara- radius: 50% 50% 0 0; aylantirish: aylantirish(90deg); ) 75% (chegara radiusi: 50% 50% 50% 0; oʻzgartirish: aylantirish(135deg); ) 100% (chegara radiusi: 50% 50 % 50% 50%; aylantirish: aylantirish (180deg; ) )

Birinchi qatorda biz buni keyin ko'ramiz kalit so'z@keyframes uning nomi "burilish". Bu ramka ramkalar blokining nomi bo'lib, biz bundan keyin to'xtalib o'tamiz.

Deklaratsiyadan keyin jingalak qavs ochiladi (in bu misolda yoqilgan toza CSS), bunda xususiyatlar har bir kalit kadr uchun 0% dan 100% gacha ketma-ket yoziladi. Esda tutingki, 0% dan 100% gacha siz xohlagancha oraliq qiymatlarni kiritishingiz mumkin, xoh 50%, 75% yoki hatto 83%. Bu animatsiya ilovasining vaqt jadvaliga juda o'xshaydi, bu erda siz ikki holat o'rtasida istalgan oraliq holatni qo'shishingiz mumkin.

Bundan tashqari, kalit kadrlarga ega ushbu kod bloki har qanday CSS selektoriga qo'llanilishi mumkin, lekin ko'pincha ular kerakli blokdan ma'lum bir xatti-harakatga erishmoqchi bo'lsak, ma'lum bir selektor uchun tayyorlanadi.

Asosiy freymlar blokiga kirish

Ob'ekt uchun asosiy freymlarni o'rnatganimizdan so'ng (haqiqiy hayotda bu parallel ravishda yoki hatto kalit ramkalar bilan blokga kirgandan keyin ham amalga oshiriladi), biz yangi yaratilgan blokimizga kira olamiz. Yuqoridagi misoldan quyidagi oddiy kodni ko'rib chiqamiz:

Div (kenglik: 120px; balandlik: 120px; fon rangi: binafsha; hoshiya: 100px; animatsiya: 2s oson chiqish 1s cheksiz muqobil; )

Oxirgi qatorga qadar hech qanday maxsus narsa yo'q. Bu erda biz ob'ektning dastlab qanday ko'rinishini aniqlaymiz va blokning oxirgi qatorida "burilish" deb nomlangan asosiy ramkalar blokiga murojaat qilamiz:

Animatsiya: cheksiz muqobil 2s oson-out 1s burilish;

Agar asosiy ramkalarning ta'rifi bilan hamma narsa nisbatan aniq bo'lsa, unda bu chiziq darhol tushuntirishga muhtoj. Ko'rib turganimizdek, birinchi navbatda CSS xususiyati"animatsiya". Bu “margin: 20px 30px 40px 50px” xususiyati kabi qisqartma shakl boʻlib, uni bir nechta alohida xususiyatlarga boʻlish mumkin:

Ushbu o'xshashlik bo'yicha "animatsiya" kompozit xususiyatini bir nechta alohida xususiyatlarga bo'lish mumkin:

animatsiya nomi	@keyframes orqali kiradigan animatsiya nomi
animatsiya - davomiyligi	Davomiyligi yoki CSS animatsiyasining bajarilishi qancha davom etadi. Soniya (lar) yoki millisekundlarda (ms) ko'rsatilishi mumkin
animatsiya-vaqt-funktsiyasi	Vaqtinchalik funktsiya, ob'ekt harakati dinamikasi yoki mulkning o'zgarishi ( yengillik- (sukut bo'yicha) animatsiya sekin boshlanadi, tezlashadi va sekin tugaydi; chiziqli- animatsiya bir tekis sodir bo'ladi; qulaylik- sekin boshlanadi va oxirgi kalit kadrga qarab tezlashadi; yengillik- tez boshlanadi va oxirida silliq sekinlashadi; qulaylik- sekin boshlanadi va sekin tugaydi)
animatsiya - kechikish	Animatsiyani boshlashdan oldin kechikish vaqti. Shuningdek, soniya yoki millisekundlarda ko'rsatilgan
animatsiyani takrorlash soni	Animatsiyani takrorlash (takrorlash) soni ( cheksiz- cheksiz yoki oddiy sonni birliklarsiz belgilashingiz mumkin)
animatsiya yo'nalishi	Animatsiya yo'nalishi, ketma-ket, teskari yoki oldinga va orqaga ( normal- (sukut bo'yicha) animatsiya boshidan oxirigacha o'ynaydi va to'xtaydi; muqobil- boshidan oxirigacha va teskari yo'nalishda o'ynaydi; muqobil-teskari- boshidan oxirigacha va orqaga o'ynaydi; teskari- animatsiya oxiridan boshlab ijro etiladi.)
animatsiya-o'yin-holat	Animatsiya ijrosini boshqarish ( pauza qilingan(pauza), yugurish(ishga tushirish) va boshqalar). Agar kerak bo'lsa: hover yoki JS funksiyasidan qo'llanilishi mumkin
animatsiyani to'ldirish rejimi	Elementning animatsiyadan oldingi va keyingi holati. Masalan, qiymat orqaga animatsiya qo'llanilgandan so'ng darhol barcha xususiyatlarni asl holatiga qaytarish imkonini beradi

Ko'pincha, tajribali ishlab chiquvchilar bu xususiyatlarning barchasini alohida yozmaydilar, lekin qisqacha yozuvdan foydalanadilar va uning tuzilishi quyidagicha:

animatsiya: (1. animatsiya-nomi - nomi) (2. animatsiya-davomiyligi - davomiylik) (3. animatsiya-vaqt-funksiya dinamikasi) (4. animatsiya-kechikish - boshlashdan oldin pauza) (5. animatsiya-iteratsiya- count - ijrolar soni) (6. animatsiya-yo'nalish - yo'nalish)

Animatsiya: animatsiya nomi 2s chiziqli 1s cheksiz teskari

Misoldan biz @keyframes animationname blokiga kiramiz, animatsiyaning davomiyligini 2 soniyaga o'rnatamiz, dinamikasi chiziqli, boshlashdan oldin pauza 1 soniya, animatsiya cheksiz takrorlanadi va teskari yo'nalishda bajariladi.

Yuqorida aytib o'tganimdek, qisqa yozuv mulk bilan boshlanadi " animatsiya", CSS animatsiyasini yozishda chalkashmaslik uchun ketma-ketligini unutmaslik yaxshiroqdir.

Biroq, ushbu xususiyatlarning ko'pchiligini e'tiborsiz qoldirish mumkin, chunki ularning standart qiymatlari ko'pincha animatsiya yaratish vazifalarini to'liq qondiradi. Ulardan ba'zilari yozilmasligi mumkin, ammo qolganlari biz oldin muhokama qilgan ketma-ketlikda ko'rsatilishi kerak. Umuman olganda, sizning animatsiyangiz ishlashi uchun kompozit xususiyatingizda faqat ikkita parametr kerak - nom ( animatsiya nomi) va davomiyligi ( animatsiya - davomiyligi).

CSS3 animatsiyasi juda keng qo'llaniladi. Hatto eng yangi veb-sayt quruvchilar uchun CSS animatsiyasi nima ekanligini va uni qanday yaratishni tushunish vaqti keldi. Siz CSS3 animatsiyasi bloklarni siljitishdan iborat deb o'ylashingiz mumkin va u multfilmga o'xshaydi. Ammo CSS animatsiyasi nafaqat elementni bir nuqtadan ikkinchisiga ko'chirish, balki buzilish va boshqa transformatsiyalar haqida ham iborat. Buni hatto yangi boshlanuvchilar uchun ham aniq qilish uchun men hamma narsani bosqichma-bosqich yozdim.

1. CSS3 animatsiyasining asosiy xossalari

Kichik nazariy blok, undan qaysi CSS3 xususiyatlari animatsiya uchun mas'ul ekanligini va ular qanday qiymatlarni olishi mumkinligini tushunasiz.

• animatsiya nomi— animatsiya uchun noyob nom (asosiy kadrlar, ular haqida quyida gaplashamiz).
• animatsiya - davomiyligi— animatsiya davomiyligi soniyalarda.
• animatsiya-vaqt-funktsiyasi— animatsiya tezligini o‘zgartirish egri chizig‘i. Bir qarashda bu juda tushunarsiz. Har doim misol bilan ko'rsatish osonroq va siz ularni quyida ko'rasiz. Quyidagi qiymatlarni qabul qilishi mumkin: chiziqli | osonlik | qulaylik | yengillik | kub-bezier(n,n,n,n) .
• animatsiya - kechikish— animatsiya boshlanishidan bir necha soniya oldin kechikish.
• animatsiyani takrorlash soni— animatsiyani takrorlash soni. U oddiygina raqam sifatida ko'rsatilishi mumkin yoki siz cheksizni belgilashingiz mumkin va animatsiya cheksiz ishlaydi.

Bu erda faqat birinchi CSS3 animatsiyasini yaratish uchun etarli bo'lgan asosiy xususiyatlar mavjud.

Nazariyadan bilishimiz va tushunishimiz kerak bo'lgan oxirgi narsa bu asosiy ramkalarni qanday yaratishdir. Buni qilish ham oson va kalit kadrlar ko'rsatilgan @keyframes qoidasi yordamida amalga oshiriladi. Ushbu qoidaning sintaksisi quyidagicha:

Yuqorida biz birinchi va oxirgi ramkani o'rnatamiz. Barcha oraliq holatlar AVTOMATIK tarzda hisoblab chiqiladi!

2. Haqiqiy CSS3 animatsiyasi misoli

Nazariya, odatdagidek, zerikarli va har doim ham aniq emas. Haqiqiy misol yordamida hamma narsani ko'rish ancha oson, lekin buni o'zingiz test HTML sahifasida qilganingiz ma'qul.

Dasturlash tilini o'rganayotganda siz odatda "Salom, dunyo!" dasturini yozasiz, undan siz ushbu tilning sintaksisini va boshqa asosiy narsalarni tushunishingiz mumkin. Ammo biz dasturlash tilini emas, balki tavsif tilini o'rganmoqdamiz ko'rinish hujjat. Shunday qilib, bizda o'z "Salom, dunyo!"

Masalan, biz nima qilamiz: Keling, qandaydir blokga ega bo'lamiz