Eng kichigi uchun CSS animatsiyasi. CSS Animation css-ni qo'llashda yordam berish uchun interfeyslar animatsiyasi

IE9 atrofidagi barcha joriy brauzerlar CSS o'tishlari va CSS animatsiyalarini qo'llab-quvvatlaydi, bu esa animatsiyalarni amalga oshirishga imkon beradi. CSS javascript holda. Har qanday html-elementlarga, shuningdek psevdo-elementlarga animatsiya zastosovuetsya : oldinі :keyin

Brauzerlar tomonidan qo'llab-quvvatlash

IE: 10.0
Firefox: 16,0, 5,0 -moz-
Chrome: 43.0, 4.0 -veb-kit-
safari: 4.0 -veb-kit-
opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -veb-kit-
Opera Mini: -
Android brauzeri: 44, 4.1 -veb-kit-
Android uchun Chrome: 44

Loyihangizdagi animatsiyani tezlashtirish uchun siz ikkita so'zni aytishingiz kifoya:

1. Yordam uchun o'z animatsiyangizni yarating kalit so'z@keyframes
2. Animatsiya qilinishi kerak bo'lgan, quvvatga bo'lgan ehtiyojni ko'rsatadigan elementga ulang.

@keyframes qoidasi

qoida @keyframes asosiy kadrlar yordamida animatsiya yaratishga imkon beradi - ob'ektni soatning to'g'ri daqiqasiga o'rnatish.

Animatsiyaning asosiy ramkalari kalit so'zlar yordamida yaratilgan danі uchun(0% va 100% qiymatlariga ekvivalent) yoki istalgan vaqtda o'rnatilishi mumkin bo'lgan qo'shimcha foiz punktlari uchun. Bundan tashqari, kalit so'zlar va foizlarni birlashtira olasiz.

Agar boshoq ishlari bo'lmasa ham ( dan, 0%) yoki sinyum ( uchun, 100% ramka, animatsiyaning hidi kabi animatsiya organlarining qiymatlarini kiritish uchun brauzer.

Agar ikkita asosiy kadrda bir xil selektor mavjud bo'lsa, oldinga siljish old tomonni bildiradi.

Belgilangan animatsiyada @keyframes ularga berilgan animatsiyalar bo'yicha amal qilish to'g'ri bo'ladi (ular berilgan bo'lsa, animatsiya elementi vakolatiga tayinlanishi mumkin, u animatsiya qilinadi).

@keyframes siljiydi ( dan ( transform: translateX(0px); ) 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )

Biz animatsiya yaratdik, chunki u quyidagicha ishlaydi:

1. Animatsiya ( dan 0%) yozishingiz mumkin - elementning X o'qi bo'ylab pozitsiyasi 0px;
2. Animatsiyaning o'rtasi (50%) - elementning X o'qi bo'ylab joylashishi 130px;
3. Kínets animatsiyasi ( uchun biz 100% ball oldik - elementni animatsiya boshiga aylantirdik, tobto. elementning X o'qi bo'ylab joylashishi 0px;

Bu erda va aniqlik uchun men elementga animatsiyali sinf qo'shish yoki ko'rish uchun ko'p sonli JavaScript qatorlarini yozdim, shuning uchun animatsiya yaratish uchun butun elementni bosing.

Asosiy kadrlarni guruhlash mumkin:

@keyframes siljiydi ( dan ( transform: translateX(0px); ) 25%, 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )

Bitta elementga bir nechta animatsiya tayinlanishi mumkin, ularning nomlari va parametrlari tayinlanganidek yozilishi kerak:

element (animatsiya nomi: animatsiya-1, animatsiya-2; animatsiya-davomiyligi: 2s, 4s; )

Elementga animatsiyani ulash ikki jamoa tomonidan ulanadi animatsiya nomiі animatsiya - davomiyligi.

Animatsiya nomi

kuch animatsiya nomi animatsiya nomini o'rnating. Animatsiyaning mohiyatini aks ettiruvchi nomini yutib olish tavsiya etiladi, bu bilan siz bir so'zni yoki bir novdani yutib olishingiz mumkin, yordam uchun bir-biriga yordam berish yoki pastki qo'llab-quvvatlash _.

animatsiya nomi: ko'chirish;

Timchas funktsiyasi

kuch animatsiya-vaqt-funktsiyasi animatsiya tezligi uchun mas'ul bo'lgan maxsus funktsiyani o'rnatish imkonini beradi. Hurmat bilan, animatsiya tezligi asosan chiziqli bo'lmagan, ya'ni. turli ishbilarmonlarda mitteva shvidkíst g'amxo'rlik qilinadi. Hozirgi vaqtda ushbu qoida uchun ko'plab dalillar mavjud: yengillik, qulaylik, yengillik , qulaylik, chiziqli , qadam boshlanishi , qadam oxiri.

Biroq, bunday funktsiyalarni o'zingiz yaratishingiz mumkin. Maxsus funktsiya kub-bezier (P1x, P1y, P2x, P2y); priymaê chotiri í̈x osnovív raspodílu znachenie pri protsí animatsíí̈ ustida bo'ladi argumentlar. O'zingizning funktsiyalaringizda mashq qiling va ushbu saytda qanday yomon hid bilan ishlashingiz mumkinligiga hayron bo'ling.

Men, nareshti, animatsiya qo'shimcha funktsiya uchun diskret qiymatlar to'plamiga aylantirilishi mumkin qadamlar(krokiv soni, to'g'ridan-to'g'ri), argument sifatida, ma'noni olishi mumkin bo'lgan krokiv i to'g'ri soni qancha? boshlash yoki oxiri .

• yengillik- qulflash funksiyasi, animatsiya to'g'ri boshlanadi, tezda buziladi va filmda soxtalashtiriladi. Kub-bezier (0,25,0,1,0,25,1) mos keladi.
• chiziqli- Animatsiya keskin bir soat davomida, tezlikda maydalanmasdan bir xil darajada yaxshi ishlaydi; kub-bezierga (0,0,1,1) mos keladi.
• qulaylik animatsiya to'g'ri boshlanadi va keyin oxirigacha silliq tezlashadi; kub-bezierga mos keladi (0,42,0,1,1).
• yengillik- Animatsiya kintsi ichida tez va muammosiz spovilnyuêtsya boshlanadi; kub-bezierga (0,0,0,58,1) mos keladi.
• qulaylik- Animatsiya to'g'ri boshlanadi va to'g'ri tugaydi; kub-bezierga mos keladi (0,42,0,0,58,1).
• kubikbezier(x1, y1, x2, y2)- div. Ko'proq.
• meros- Batkiv elementidan kuchning pasayishi.

Vizual moslashuv

Zatrimka dan animatsiya

kuch animatsiya - kechikish soniya yoki millisekundlarda o'rnatilgan animatsiyani yaratishda zatrimka. Salbiy zatrimka animatsiyani tsiklning o'rtasida birinchi daqiqadan boshlab tobto boshlaydi. zathrimtsi tomonidan belgilangan soatda. Bu animatsiyani quruq fazadan bir necha elementlargacha to'xtatishga imkon beradi, bir soatdan kamroq to'xtashni o'zgartiradi. Agar siz animatsiyani oʻrtadan boshlashni istasangiz, salbiy kechikishni oʻrnating, bu oʻrnatilgan yarim soatdan yaxshiroq. animatsiya davomiyligi. Chi rad etmaydi.

element (animatsiya nomi: animatsiya-1; animatsiya-davomiyligi: 2s; animatsiya-kechikish: 10s; // Ushbu animatsiyani boshlashdan oldin 10 soniya o'ting)

Animatsiyani takrorlash

kuch animatsiyani takrorlash soni animatsiyani bir necha marta ishga tushirish imkonini beradi. Chi rad etmaydi. Qiymatni qanday belgilash kerak, u ijobiy qiymat bo'lsin 1, 2, 3 … va boshqalar. yoki cheksiz cheksiz takrorlash uchun. Qiymat 0 aks holda, agar siz raqamni ko'rsangiz, ular gravyuradan animatsiyani ko'radilar.

| 18.02.2016

CSS3 UI dizaynerlari uchun imkoniyatni namoyish etadi va asosiy afzallik shundaki, g'oyani JavaScript-ga kirmasdan hayotda osongina amalga oshirish mumkinmi yoki yo'qmi amaliydir.

Ajablanarlisi shundaki, oddiy so'zlar ajoyib veb-saytni jonlantirib, uni koristuvachlar oluvchilar uchun ochiq qiladi. CSS3 haqida o'ting, yordam uchun elementni o'zgartirish va uslubni o'zgartirishga ruxsat berishingiz mumkin, masalan, kursorni ustiga o'tayotganda. Quyida mavjud bo'lgan to'qqizta CSS3 animatsiyasi saytda g'ayrioddiy muhit yaratishga yordam beradi, shuningdek, chiroyli silliq o'tishlar bilan shamolning yovvoyi ko'rinishini yaxshilaydi.

Batafsil ma'lumot olish uchun siz arxivlarni fayllardan yuklab olishingiz mumkin.

Usí effekti pratsyut z qo'shimcha quvvat o'tish (ing. o'tish- "O'tish", "transformatsiya") va psevdo-sinf: kursorni yangi sichqoncha kursori ustiga olib kelganda elementning uslubini aniqlaydigan hover (bizning yordamchimiz uchun). Ilovalarimiz uchun biz 500 × 309 piksel o'lchamdagi div blokidan foydalandik, fon uchun standart rang # 6d6d6d va biri va ikkinchisi o'rtasidagi o'tish 0,3 soniyagacha davom etadi.

Tana > div (kenglik: 500px; balandlik: 309px; fon: #6d6d6d; -webkit-o'tish: hammasi 0,3 s oson;; -moz-o'tish: hammasi 0,3 s qulaylik;; -o-o'tish: hammasi 0,3 s qulaylik; o'tish : hammasi 0,3 s oson;)

1. Hover soatining rangini o'zgartiring

Agar bunday effektni amalga oshirish robotning bir xil RGB qiymatlarining matematik hisob-kitoblari bilan nusxasi bilan amalga oshirilsa edi. Yozish kifoya css uslubi, bu holda selektorga psevdoklas: kursorni qo'shish va fon rangini o'rnatish kerak bo'ladi, bu kursor blok ustiga olib kelinganda fon rangini silliq (0,3 soniyada) o'zi bilan almashtiradi:

Rang: kursor (fon: #53ea93; )

2. Ramkaning tashqi ko'rinishi

Cicava - bu yorqin o'zgarishlar sichqonchani ko'targanda silliq paydo bo'ladigan ichki ramka. ozdoblennya r_znih tugmalari uchun Dobre pídyyde. Ushbu effektga erishish uchun biz psevdo-sinfdan foydalanamiz: hover va inset parametri bilan box-shadow kuchi (elementning o'rta soyasini o'rnatadi). Krim tsgogo, soyaning kengaytmasini o'rnatish kerak (biznikida bu 23px) va bu rang:

Chegara: kursorni ko'tarish (quti-soya: 0 0 0 23px #53ea93; )

3. Belanchak

Dana CSS animatsiyasi- Vignatok, o'tish kuchi bu erda g'olib emasligi. Yangi mi zadíyali o'rinbosari:

• @keyframes - bu asosiy kadrlarning funksiyalarini faollashtirish uchun kvadratma-kadr CSS animatsiyalarini yaratish uchun asosiy direktivdir. rozkadruvannya va asosiy lahzalar ro'yxatida animatsiyani tasvirlab bering;
• animatsiya va animatsiya-iteration-count - animatsiya parametrlarini (trivallik va tezlik) va tsikllar sonini (takrorlash) o'rnatish vakolati. Ba'zan takrorlang 1.

4. Rad etish

Silliq so'nishning ta'siri, aslida, elementning shaffofligidagi normal o'zgarishdir. Animatsiya ikki bosqichda yaratiladi: boshning orqa tomonida shaffoflik 1 tegirmonini o'rnatish kerak - bu butunlay shaffof bo'lmasligi uchun, shundan so'ng siz sichqonchani ko'targanda qiymatni ko'rsatishingiz kerak - 0,6:

Fade ( shaffoflik: 1; ) .fade:hover ( shaffoflik: 0,6; )

Qarama-qarshi natijaga erishish uchun oylarning qiymatlarini eslang:

5. Yaxshilash

Shunday qilib, siz blok ustiga o'tsangiz, blok kattalashadi, biz transformatsiya kuchini tezlashtiramiz va shkala (1.2) qiymatini o'rnatamiz. Buning yordamida blok uning nisbatlarini tejagan holda 20 vydsotkív íz ga oshiriladi:

Grow: hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. O'zgartirish

Elementni o'zgartirish uni o'zgartirish kabi oddiy. Garchi beshinchi xatboshida masshtabni oshirish uchun biz kattaroq, 1 dan pastroq qiymatni belgilashimiz kerak bo'lsa-da, keyin blokni o'zgartirish uchun biz shunchaki qiymatni ko'rsatamiz, go'yo u birdan kichik bo'lsa, masalan, masshtab(0,7) . Endi, sichqonchani surganingizda, blok o'zining o'lchamiga qarab mutanosib ravishda 30 kvadrat metrga o'zgaradi:

Shrink: hover ( -webkit-transform: scale(0,7); -ms-transform: scale(0,7); transform: scale(0,7); )

7. Koloning o'zgarishi

Eng mashhur animatsiyalardan biri bu to'g'ri chiziqli element bo'lib, u kursorni ustiga olib borilganda kologa aylanadi. CSS chegara radiusining qo'shimcha quvvati uchun, u bilan bog'langan: hover va o'tish muammosiz amalga oshirilishi mumkin:

Doira: kursor (chegara radiusi: 70%; )

8. O'rash

Animatsiyaning komediya varianti - elementni bir darajaga aylantirish. Buning uchun biz yana o'zgartirish kuchiga muhtojmiz, lekin boshqa qiymatlarda ham - rotateZ (20deg). Bunday parametrlar uchun blok Z o'qi bo'ylab yil o'qidan 20 daraja orqada aylanadi:

Aylantirish: hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )

9. 3D soya

Dizaynerlarning fikrlari tekis dizaynning yakuniy ta'siri nimada farqlanadi. Tim ham kam emas, CSS3 animatsiyasi yanada original va veb-saytlarda ham namoyish etiladi. Arzimas effektga erishish bizga allaqachon ma'lum bo'lgan yordam uchun bo'ladi quvvat qutisi - soya(Boy shar soyasini yarating) va translateX(-7px) parametri bilan oʻzgartiring (blokni gorizontal ravishda chapga 7 piksel bilan taʼminlang):

uchlik: hover (box-soya: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px -7px); transform: translateX(-7px);

Brauzerlar tomonidan qo'llab-quvvatlash

Ushbu kuch kunida o'tish quyidagi brauzerlar tomonidan qo'llab-quvvatlanadi:

Boshqa kuchlar, g'alabalar, masalan, transformatsiya, quti soyasi va boshqalar, shuningdek, hamma narsa tomonidan qo'llab-quvvatlanadi. zamonaviy brauzerlar. Biroq, agar siz loyihalaringiz uchun ushbu g'oyalarni yutib olishni tanlasangiz, brauzerlar o'rtasidagi muvofiqlikni qayta tekshirish tavsiya etiladi.

Umid qilamizki, ushbu CSS3 animatsiyalari siz uchun mos edi. Ijodiy muvaffaqiyat uchun rahmat!

CSS3 animatsiya saytlarga dinamizm berish. Won pozhvavlyuê veb-sahifalar, pokrashchuchi vzaêmodíyu z coristuvach. CSS3 o'tishlari ustiga, animatsiyalarni yaratish asosiy kadrlarga asoslanadi, bu sizga ma'lum bir soat davomida effektlarni avtomatik ravishda yaratish va takrorlash, shuningdek, animatsiyani tsiklning o'rtasida boshlash imkonini beradi.

CSS3 animatsiyasi deyarli barcha HTML elementlari uchun, shuningdek, psevdoelementlardan oldin va keyin qo'llanilishi mumkin. Hokimiyat animatsiyalari ro'yxati yon tomonda joylashgan. Animatsiya yaratishda buni unutmang mumkin bo'lgan muammolar s unumdorligi, oskílki zmína deyakih organlari resurslari ko'p kerak.

CSS animatsiyasiga kirish

Brauzerlar tomonidan qo'llab-quvvatlash

IE: 10.0
Firefox: 16,0, 5,0 -moz-
Chrome: 43.0, 4.0 -veb-kit-
safari: 4.0 -veb-kit-
opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -veb-kit-
Opera Mini: —
Android brauzeri: 44, 4.1 -veb-kit-
Android uchun Chrome: 44

1. Asosiy ramkalar

Animatsiyaning turli nuqtalarida animatsiya kuchining ma'nosini aniqlash uchun asosiy kadrlar tanlanadi. Kalit kadrlar animatsiyaning bir siklining harakatini belgilaydi; animatsiya nol yoki undan ortiq marta takrorlanishi mumkin.

Asosiy kadrlar @keyframes qoidasiga muvofiq belgilanadi, chunki ularga quyidagi tartib tayinlangan:

@keyframes im'ya animatsii (qoidalar ro'yxati)

Yaratilgan animatsiya o'rnatishdan boshlanadi asosiy xodimlar@keyframes qoidalari. Kadrlar qaysi bosqichda jonlantirilishi xarakteristikalari sifatida belgilanadi. Teri ramkasi bir yoki bir nechta quvvat juftligi va qiymatlarida bir yoki bir nechta deklaratsiya bloklarini o'z ichiga olishi mumkin. @keyframes qoidasi elementni jonlantirishdir, go'yo qoida element animatsiyasining o'sha blokiga qo'llaniladi.

@keyframes soyasi ( (matn soyasi: 0 0 3px qora;) 50% (matn soyasi: 0 0 30px qora;) dan (matn soyasi: 0 0 3px qora;) )

Kalit ramkalar dan vagacha (0% va 100% qiymatlariga ekvivalent) yoki qo'shimcha foiz punktlari uchun qo'shimcha kalit so'zlar uchun yaratilgan, shuning uchun siz har yili chegirmalarni o'rnatishingiz mumkin. Bundan tashqari, kalit so'zlar va foizlarni birlashtira olasiz. Ushbu ma'no kuchida ramkalar bir xil bo'lishi mumkin bo'lsa ham, ular bir ovozda birlashtirilishi mumkin:

@keyfymlar siljiydi ( dan, dan ( tepada: 0; chapda: 0; ) 25%, 75% (yuqorida: 100%;) 50% (yuqorida: 50%;) )

Agar 0% yoki 100% ramkalar ko'rsatilmagan bo'lsa, brauzer jonlantirilgan quvvatning (vazifalar tartibida) hisoblangan bir nechta qiymatlarini yaratadi.

Shunday qilib, @keyframes qoidalari to'plami ularga o'zlari tayinlanadi, qolganlari hujjat tartibida qoldiriladi va kelajakda hamma narsa e'tiborga olinmaydi.

@keyframes qoidasi o'tkazib yuborilganligi sababli biz yangi animatsiyadan foydalanishimiz mumkin:

H1 (shrift o'lchami: 3,5 m; rang: qorong'u magenta; animatsiya: soya 2s cheksiz qulaylik; )

Raqamli bo'lmagan qiymatlarni jonlantirish tavsiya etilmaydi (kamdan-kam uchraydigan xato uchun), brauzer natijasi o'tkazilmasligi mumkin. Shuningdek, o'rta nuqtani o'zgartirmasdan quvvat qiymatlari uchun kalit kadrlarni yaratmang, masalan, quvvat qiymatlari uchun rang: pushti va rang: #ffffff , kenglik: avtomatik va kenglik: 100px yoki chegara radiusi: 0 va chegara -radius: 50% (men ushbu ko'rish paneli uchun chegara radiusini to'g'ri o'rnatmoqchiman: 0%.)

1.1. Asosiy kadrlar uchun vaqt soati funksiyasi

Asosiy kadrlar uslubi qoidasi taymer funksiyasini ham kar qilishi mumkin, chunki animatsiyani keyingi asosiy kadrga o‘tkazish uchun burish kerak.

dumba

@keyframes bounce ( dan ( tepada: 100px; animatsiya-vaqt-funktsiyasi: oson-chiqarish; ) 25% ( tepada: 50px; animatsiya-vaqt-funksiyasi: qulaylik; ) 50% ( tepada: 100px; animatsiya-vaqt- funksiya: osonlik; ) 75% (yuqori: 75px; animatsiya-vaqt-funksiyasi: kirishni osonlashtirish; ) dan (tepasi: 100px; ) )

Qaytish animatsiyasi uchun beshta asosiy kadrlar belgilangan. Birinchi va boshqa asosiy freymlar o'rtasida (keyin 0% dan 25% gacha), kuchaytirish funksiyasi g'alaba qozonadi. Boshqa va uchinchi kalit ramka o'rtasida (keyin 25% dan 50% gacha), silliq tezlashtirish funktsiyasi yutadi. Va hozirgacha. Element oʻzining eng yuqori nuqtasiga yetganda dunyoni kuzatib, yon tomondan 50px ga tepaga siljiydi va agar oyna 100px ga tushib qolsa, shoshiling. Animatsiyaning ikkinchi yarmi xuddi shunday harakat qiladi, lekin elementni faqat 25px yon tomonga siljitadi.

Asosiy kadrda yoki 100% gacha ko'rsatilgan vaqt soati funksiyasi e'tiborga olinmaydi.

2. Animatsiya nomi: avtoritet animatsiyasi-nomi

Animatsiya nomining kuchi elementdan oldin joylashtirilishi kerak bo'lgan animatsiyalar ro'yxatini belgilaydi. Teri im'ya vikoristovuetsya qoidalarida asosiy ramka tanlash uchun, biz animatsiya kuch ma'nosini bilamiz. Agar u qoidadagi bir xil kalit kadrga mos kelmasa, animatsiya uchun vakolatlar yo'q, uni kun davomida animatsiya qilib bo'lmaydi, animatsiyani urib bo'lmaydi.

Kam sonli animatsiyalar o'sha kuchni o'zgartirishga harakat qilsa, animatsiya g'alaba qozonadi va nomlar ro'yxatining oxiriga yaqinlashadi.

Bu animatsiya katta-kichik harflarga sezgir, none kalit so'zidan foydalanishga ruxsat berilmaydi. Animatsiyaning mohiyatini aks ettiruvchi nomni keltirish tavsiya etiladi, bu holda bir yoki bir nechta so'zlarni keltirish mumkin, defis yoki pastki subtitr belgisi _ orqali qayta yoziladi.

Quvvat pasaymaydi.

Sintaksis

Animatsiya nomi: yo'q; animatsiya nomi: test-01; animatsiya-nomi: -sliding; animatsiya nomi: vertikal harakatlanish; animatsiya nomi: test2; animatsiya nomi: test3, move4; animatsiya nomi: boshlang'ich; animatsiya nomi: meros;

3. Animatsiyaning trivalligi: animatsiyaning kuchi-davomiyligi

Animatsiya-davomiyligining kuchi bir animatsiya tsiklining haqiqiyligini aniqlaydi. soniyalarda yoki millisekundlarda ko'rsatilgan. Agar element uchun bir nechta animatsiya o'rnatilgan bo'lsa, siz koma orqali qiymatni bekor qilib, boshqa teri soatini o'rnatishingiz mumkin.

Quvvat pasaymaydi.

Sintaksis

Animatsiya davomiyligi: .5s; animatsiya davomiyligi: 200ms animatsiya davomiyligi: 2s, 10s animatsiya davomiyligi: 15s, 30s, 200ms

4. Vaqt funksiyasi: animatsiya-vaqt-funksiyaning kuchi

Animatsiya-vaqt-funksiyaning kuchi asosiy kadrlar juftligi o'rtasida animatsiya qanday rivojlanishini tasvirlaydi. Zatrimka soati ostida timchalar funktsiyalarining animatsiyalari g'alaba qozonmaydi.

Quvvat pasaymaydi.

Sintaksis

Animatsiya-vaqt-funktsiyasi: qulaylik; animatsiya-vaqt-funktsiyasi: qulaylik; animatsiya-vaqt-funktsiyasi: osonlik bilan chiqish; animatsiya-vaqt-funktsiyasi: qulaylik; animatsiya-vaqt-funktsiyasi: chiziqli; animatsiya-vaqt-funktsiyasi: qadam-start; animatsiya-vaqt-funktsiyasi: qadam-end; animatsiya-vaqt-funktsiyasi: kub-bezier (0,1, 0,7, 1,0, 0,1); animatsiya-vaqt-funktsiyasi: qadamlar (4, oxiri); animatsiya-vaqt-funktsiyasi: qulaylik, qadam-start, kubik-bezier (0,1, 0,7, 1,0, 0,1); animatsiya-vaqt-funktsiyasi: boshlang'ich; animatsiya-vaqt-funktsiyasi: meros;

Muqova animatsiyasi yordamida siz bir nechta effektlarni yaratishingiz mumkin, masalan, ishlaydigan matn yoki qiziqish ko'rsatkichi.

5. Animatsiyani takrorlash: animatsiya-iteratsiya-hisoblash kuchi

Animatsiya-iteratsiya-hisoblash kuchi animatsiya sikli necha marta o'ynalishini ko'rsatadi. Kobda 1 qiymati animatsiyaning oxirigacha bir marta bajarilishini bildiradi. Bu kuch ko'pincha muqobil quvvat animatsiya yo'nalishining muqobil qiymatlari ustidan g'alaba qozonadi, go'yo animatsiya muqobil tsikllarda teskari tartibda harakatlanayotgandek.

Quvvat pasaymaydi.

Sintaksis

Animatsiyani takrorlash soni: cheksiz; animatsiyani takrorlash soni: 3; animatsiyani takrorlash soni: 2,5; animatsiyani takrorlash soni: 2, 0, cheksiz;

6. To'g'ridan-to'g'ri animatsiya: animatsiya-yo'nalish kuchi

Animatsiya yo'nalishining vakolati barcha sikllarda qaysi animatsiyani tartibda bajarish mumkinligini belgilaydi. Agar animatsiya teskari tartibda bo'lsa, vaqt funktsiyalari ham bosqichlar bo'yicha o'zgartiriladi. Masalan, teskari tartibda berilganda, qulaylik funksiyasi o'zini osonlashtirish kabi ishlaydi.

Quvvat pasaymaydi.

Chi animatsiya siklining juftlangan yoki juftlanmagan takrorlanishi ekanligini aniqlash uchun - takrorlashlar soni 1 dan boshlanadi.

Sintaksis

Animatsiya yo'nalishi: normal; animatsiya yo'nalishi: teskari; animatsiya yo'nalishi: muqobil; animatsiya-yo'nalish: muqobil-teskari; animatsiya-yo'nalish: normal, teskari; animatsiya-yo'nalish: muqobil, teskari, normal; animatsiya yo'nalishi: boshlang'ich; animatsiya-yo'nalish: meros;

7. Animatsiya yaratish: animatsiya-o'yin-holatning kuchi

Animatsiya-o'yin holatining kuchi animatsiya ishga tushirilishi yoki to'xtatilishini aniqlaydi. Tsiklning o'rtasida Zupinka animatsiyasi vikoristannya tsíêíy hokimiyati orqali mumkin JavaScript skripti. Sichqonchani ob'ekt ustiga olib borganingizda ham animatsiyani boshlashingiz mumkin - lager: hover.

Quvvat pasaymaydi.

Sintaksis

Animatsiya-o'yin-holat: yugurish; animatsiya-o'yin holati: to'xtatildi; animatsiya-o'yin-holat: to'xtatilgan, yugurish, yugurish; animatsiya-o'yin-holat: boshlang'ich; animatsiya-o'yin-holat: meros;

8. Animatsiya zatrimka: animatsiya-kechikish kuchi

Animatsiyaning kechikish kuchi animatsiyaning to'xtab qolishini aniqlaydi. soniyalarda yoki millisekundlarda ko'rsatilgan.

Quvvat pasaymaydi.

Sintaksis

Animatsiya kechikishi: 5s; animatsiya kechikishi: 3s, 10ms

9. Keyingi animatsiya yaratilgunga qadar elementni o'rnating: quvvat animatsiyasi-to'ldirish rejimi

Animatsiyani to'ldirish rejimining kuchi animatsiyani bir soat davomida to'xtatish qanchalik muhimligini aniqlaydi. Animatsiya tugagach, element asl uslublariga aylantiriladi. Animatsiyalar uchun animatsiya animatsiya nomi va animatsiya-kechikish elementidan oldin to'xtab qolsa, animatsiya kuchning ma'nosiga ta'sir qilmaydi. Bundan tashqari, qisqartmalardan tashqari, animatsiya tugallangandan keyin kuchning ma'nosiga qo'shilmaydi - animatsiya-davomiylik va animatsiya-iteratsiya-hisoblash. Animatsiyani to'ldirish rejimining kuchi bu xatti-harakatni bekor qilishi mumkin.

Quvvat pasaymaydi.

Sintaksis

Animatsiyani to'ldirish rejimi: yo'q; animatsiyani to'ldirish rejimi: oldinga; animatsiyani to'ldirish rejimi: orqaga; animatsiyani to'ldirish rejimi: ikkalasi ham; animatsiyani to‘ldirish rejimi: yo‘q, orqaga; animatsiyani to'ldirish rejimi: ikkalasi ham, oldinga siljiydi, hech biri;

10. Qisqa animatsiyani yozib olish: animatsiyaning kuchi

Animatsiyani yaratishning barcha parametrlari bir xil quvvatda birlashtirilishi mumkin - animatsiya , ularni bo'shliq orqali qayta tartibga solish:
animatsiya: animatsiya-nomi animatsiya-davomiylik animatsiya-vaqt-funksiya animatsiya-kechikish animatsiya-iteratsiya-hisoblash animatsiya-yo‘nalishi;

Animatsiyani yaratish uchun faqat ikkita kuchni ko'rsatish kifoya - animatsiya-nomi va animatsiya-davomiyligi , vakolatlarning animatsiya qiymatini qabul qilish qarori. Quvvatni bekor qilish tartibi muhim emas, animatsiya-davomiyligining bir soati animatsiya kechikishiga duch kelishi shart.

11. Bir nechta animatsiyalar

Bitta element uchun siz bir nechta animatsiyalarni o'rnatishingiz mumkin, ularning nomini kim orqali o'zgartirishingiz mumkin:

Div (animatsiya: soya 1s oson-chiqish 0,5s muqobil, 5s chiziqli 2s harakat;)

Animatsiya yaratish uchun CSS o'tish va animatsiya kuchidan foydalaning Keling, ularni dumba bilan ko'rib chiqaylik.

Animatsiya elementlari nafaqat dizaynni o'zining ajoyib va ​​nafisligi bilan chayqabgina qolmay, balki saytni tom ma'noda o'ziga jalb qilgandek ijobiy his-tuyg'ularni uyg'otadi.

Tse scho koristuvach belgilarini ko'rsatishi kerak.

Veb-ishlab chiqishga kelsak, animatsiya elementlarga CSS-da, JavaScript-ni ishlatmasdan, mobil qurilmalar uchun yaxshi bo'lgan tarkibga ruxsat beradi.

Oldinda aybdor - birinchi navbatda elementlarni jonlantirishni boshlang, siz HTML va CSS asoslarini o'rganishingiz kerak

CSS animatsiyasining asosiy komponentlari o'tish va animatsiya kuchi va @keyframes qoidasi.

Keling, ularni tartibda ko'rib chiqaylik.

o'tish

O'tishning kuchi oddiy animatsiyalarni yaratishga o'rnatiladi, bu ikki element holati o'rtasidagi o'tish effektini yaratadi.

o'tishni 4 ta omborga bo'lish mumkin, ularning terisi o'tish effektining qo'shiq jihatiga qo'shiladi.

1. o'tish-xususiyat - jonlantirish kuchini belgilaydi. Misol uchun, agar element yo'q qilinishi kerak bo'lsa, u holda yuqori, chap, chekka va boshqalar kuchli bo'ladi, o'lchamni, keyin kenglik yoki balandlikni o'zgartiring, rangni o'zgartiring - rang yoki fon.

Ro'yxatdan o'tish quyidagicha:

o'tish-xususiyat: chap;

2. o'tish-davomiyligi - o'tish effektining ahamiyatsizligi. Bir soniya ichida o'rnating.

o'tish muddati: 3s;

3. o'tish-vaqt-funktsiyasi - silliq o'tish effekti. Quyidagi ma'noni oling:

qulaylik - animatsiya to'g'ri boshlanadi, keyin u tezlashadi va oxirigacha tinchlanadi;

ease-in - yaxshi oson, lekin oxirigacha shoshiling;

yengillik - sekinlashtiring, lekin oxirigacha tinchlaning;

osonlikcha - ko'tarilishda va oxirgisida;

chiziqli - doimiy tezlik;

kubik-bezier - raqamli ko'rinish uchun barcha qiymatlarni o'rnatadi. Masalan, qulaylik kub-bezier (0,25,0,1,0,25,1) shaklida yoziladi.

4. o'tish-kechikish - animatsiyani kobda soya qilish. Bir necha soniya ichida ko'rsatiladi. Masalan, animatsiya orqali boshlanishi mumkin qo'shiq soati tomonning chigallashganidan keyin.

Qisqartirilgan versiyada animatsiya yozuvi yaqinlashib kelayotgan darajaga o'xshaydi - o'tish kuchida barcha qiymatlar bo'shliqlar orqali tartibda o'rnatiladi.

o'tish: 3s osonlik (yoki kub-bezier(0,25,0,1,0,25,1) 3s chap;

Tugma, buning uchun element kursorni yangi kursor ustiga olib kelganda siljiydi.

Natija:

animatsiya va @keyframes

Animatsiyaning kuchi va @keyframes qoidasi qanchalik izchil bo'lishidan qat'i nazar, animatsiya yaratishda g'alaba qozonadi.

Animatsiya kuchi animatsiya uchun animatsiya parametrlarini o'rnatadi (animatsiyaning trivalligi, takrorlash, to'g'ridan-to'g'ri, ruhu turi, krok) va @keyframes blokida animatsiyaning o'zi to'qilgan (ushbu pozitsiyaning ko'rinishini o'zgartirish) tomonidan o'rnatiladi. )

Animatsiya kuchi barcha omborlarni o'z ichiga oladi:

1. animatsiya-nomi – animatsiyaning nomi. yetarlicha so‘rang. Agar siz @keyframes blokiga, bitta elementning parchalariga animatsiya tayinlashni istasangiz, u holda animatsiya parchasini o'rnatishingiz mumkin.

2. animatsiya-davomiyligi - soniya (s) yoki millisekundlar (ms) bilan belgilangan animatsiya davomiyligi.

3. animatsiya-timing-funksiyasi - animatsiya turini aniqlaydi va quyidagi qiymatlarni qabul qiladi:

osonlik - zarb qilish;

chiziqli - teng harakat;

ease-out - o'zingizni xotirjam tuting;

qulaylik - oxirida tezlashtirish;

ease-in-out - yanada silliq zarb qilish, past qulaylik

kubik-bezier - katlamali animatsiya turlarini amalga oshirishga imkon beruvchi raqamli parametrlarni o'rnatish. Raqamli parametrlarni tanlash vositasi - cubic-bezier.com

qadam-start va step-end - pokrokovu animatsiyasini o'rnatish (animatsiya)

qadamlar - animatsiya vikonan bo'ladigan qisqa filmlar sonini o'rnating (ikkinchi - qadamlar (60) animatsiya-davomiyligi -60s)

4. animation-iteration-count - animatsiyaning takrorlanish sonini belgilaydi. Qabul qilingan qiymat:

u raqam bo'lsin - animatsiya necha marta takrorlanadi;

cheksiz - cheksiz takrorlash;

5. Animatsiya-yo‘nalish – harakatni boshqaradi. Qabul qilingan qiymat:

normal - o'ngga buriling;

teskari - o'ngga chapga buriling;

muqobil - tsiklni oldinga va orqaga takrorlash;

muqobil-teskari - yangi tsikl, lekin u oxiridan boshlanadi va tugaydi;

6. animation-play-state - animatsiya tovushini o'rnatadi. Qabul qilingan qiymat:

ishga tushirish - an'anaviy tarzda ishlash uchun animatsiya (sukut bo'yicha);

pauzed - animatsiya birinchi marta to'xtatiladi;

7. animatsiya-kechikish - animatsiyaning kechikishini ochilish kobidan oldin o'rnatadi. Soniya (s) va millisekundlarda (ms) ko'rsatiladi

8. animatsiya-to'ldirish rejimi - ko'rsatilgan ochilish soatida pozaning animatsiyasini o'ynashga imkon beradi. Qabul qilingan qiymat:

yo'q - animatsiya faqat yaratilgan yaratilgan soatda ishlaydi, keyin u aylanadi.

oldinga - animatsiya ochilish soati tugaganidan keyin davom etadi;

orqaga - animatsiya boshidan boshlanadi;

ikkalasi ham - animatsiya soat boshigacha va oxirigacha ishlaydi;

Qo'lning orqa tomonidagi Deyakí z tsikh hukmronligi bema'ni bo'lishi mumkin, ammo katlama animatsiyalari bilan birlashganda, hid sizga kulgili ijodiy echimlarni amalga oshirishga imkon beradi.

Barcha kuchlarni tezkor ko'rinishda yozish mumkin, kuchda animatsiyani ko'rsatish ularning ma'nosidan kamroq. Masalan:

@keyframes qoidasi katlamali animatsiyalarning yana bir qo'llanilishidir.

Ushbu qoidaning o'rtasi bosqichma-bosqich yaratilmoqda, element bilan sodir bo'ladigan transformatsiyani yaratish.

Aslida, bu shunday ko'rinadi: @keyframes selektori uslublar jadvalida yaratiladi, uning o'rtasida selektorlar joylashtiriladi va ketma-ket element holatini aniqlaydi.

Masalan, elementni olaylik

div (
kengligi: 200px
balandligi: 200px;
fon rangi: #FF3D00;
animatsiya: nev 5s cheksiz muqobil;

@keyframes nev (
dan ( /* Ko'rish */
shaffoflik: 0 /* to'liq shaffoflik */
}
( /* Oldin */
shaffoflik: 1 /* butunlay shaffof emas */
}
}

Bir elementdan ikkinchisiga o'zgartirishni o'rnatish uchun va selektorlari.

Ale, o'zgartirishni vydsotkada joyiga qo'yish yaxshidir. Selektorlarning bir xil sonini ko'paytirish va shu bilan birga jarayonni ko'proq bosqichlarga bo'lish mumkin.

Teri bosqichi uchun siz o'zingizni qo'yishingiz mumkin. Masalan, trivallik, kordon, rozmir toshcho.

@keyframes nev (
0% {
shaffoflik: 0
chegara radiusi: 50%
}

50% {
shaffoflik: 0,5
chegara radiusi: 30%
}

100% {
shaffoflik: 1
chegara radiusi: 0;
}
}

Ushbu kvadrat belgisining ko'rinishiga misol:

Natija:

Ishonchim komilki, animatsiyani yaratish asoslari tushunilgan. Endi, agar sizda bu vositaning ma'nosi, kuchi bo'lsa, Notepad ++ ni oching va oddiydan katlamagacha ishlang.

Kelgusi maqolada "CSS-ni ko'chirish, o'rash, 3D" biz ko'pincha animatsiyalarda qolib ketadigan transformatsiyaning kuchini batafsil tahlil qilamiz.

CSS3 animatsiyasi keng qo'llab-quvvatlanadi. Veb-sayt quruvchilar uchun CSS animatsiyalarini qanday yaratish haqida gapirishni boshlash vaqti keldi. Siz CSS3 animatsiyasi bloklarni qulashi va multfilmga o'xshashi uchun javobgar deb o'ylashingiz mumkin. Ale CSS animatsiyasi - nafaqat elementni bir nuqtadan ikkinchisiga ko'chirish, balki boshqa transformatsiyani yaratish. Sob tse bulo ozumylo navit pochatkívtsív uchun, men krujka ustida bir mo'ylov bo'yalgan.

1. CSS3 animatsiyasining asosiy kuchi

Kichkina nazariy blok, siz tushunganingizdek, CSS3 animatsiya uchun qanchalik kuchli va hidning ma'nosini qanday chaqirish mumkin.

• animatsiya nomi- Noyob animatsiyalar (asosiy kadrlar, ular haqida quyida gaplashamiz).
• animatsiya davomiyligi- Animatsiya trivalligi soniyalarda.
• animatsiya-vaqt-funktsiyasi- animatsiya tezligini o'zgartirish uchun egri chiziq. Bir qarashda, bu mantiqiy emas edi. Oldinga uni dumba ustida ko'rsatish osonroq, Vee esa pastroq. Siz quyidagi qiymatlardan foydalanishingiz mumkin: chiziqli | osonlik | qulaylik | yengillik | kub-bezier(n, n, n, n) .
• animatsiya - kechikish- Animatsiya boshlanishidan bir necha soniya oldin tortish.
• animatsiyani takrorlash soni- Animatsiyani takrorlash soni. U oddiygina raqam bilan o'rnatilishi mumkin yoki siz cheksizni belgilashingiz va animatsiyani cheksiz sanashingiz mumkin.

Boshqa asosiy kuch yo'q, CSS3 da birinchi animatsiyangizni yaratish uchun ko'proq narsa etarli.

Qolgan holda, biz nazariyani tushunishni bilishimiz kerak - bularni, asosiy kadrlarni qanday yaratishni. Ishlash va o'rtasida kalit kadrlar ko'rsatilgan @keyframes qoidasi yordamida kurashish oson. Ushbu avanslar qoidasining sintaksisi:

Biz birinchi va oxirgi ramkani o'rnatdik. Usy promizhny AVTOMATLI razrahuyutsya bo'lib!

2. Haqiqiy hayot CSS3 animatsiyasi misoli

Nazariya har doimgidek zerikarli va haqiqatda. Haqiqiy dasturda hamma narsani ishlash osonroq va uni test HTML tomonida o'z qo'llaringiz bilan ishlab chiqish yaxshiroqdir.

Dastur tilini o'rganganingizda, "Salom, dunyo!" dasturini yozing. Ale mi vchaemo mov dasturlash emas, balki mov tavsifi aqlli ko'rinish hujjat. Shuning uchun biz "Salom, dunyo!".

Dumba uchun eksa: Keling, qandaydir blokga ega bo'lamiz