2-Amaliy ish Mavzu: Transitions xususiyatini o‘rganish Ishdan maqsad: Css da transitions xususiyati effektlarini qo'llashni o'rganish va amaliyotda sinab ko'rish. Nazariy qism css transitions

7

2-Amaliy ish

Mavzu: Transitions xususiyatini o‘rganish
Ishdan maqsad: Css da transitions xususiyati effektlarini qo'llashni o'rganish va amaliyotda sinab ko'rish.
Nazariy qism
CSS transitions(CSS o'tishlari)
CSS transitions bizga ma'lum vaqt davomida mulk qiymatlarini muammosiz o'zgartirish imkonini beradi.Transition xususiyati ob'ektning o'zgaruvchan CSS xususiyati, animatsiyaning o'tish muddati, vaqtni belgilash funksiyasi, animatsiyani kechiktirish kabi animatsiya parametrlari uchun javobgardir. Transitionsning o'zini bir nechta xususiyatlari bor. Bu xususiyatlar haqida bilib olamiz:
~ transitions- To'rtta transitions xususiyatini bitta xususiyatga o'rnatish uchun stenografiya xususiyati
~ transition-delay-Transitions effekti uchun kechikishni (soniyalarda) belgilaydi
~ transition-duration-Transitions effekti qancha vaqtda(millisekundda) bajarilishini belgilaydi
~ transition-property-Transitions effekti uchun CSS xususiyati nomini belgilaydi
~ transition-timing-function-Transitions effektining tezlik egri chizig'ini belgilaydi
Transitions xususiyatlarini to'liq qo'llab-quvvatlaydigan brauzer versiyalarini ko'rsatib o'taman.



CSS transitionsdan qanday foydalanish kerak?
Transitions effektini yaratish uchun siz ikkita narsani belgilashingiz kerak:
Effekt qo'shmoqchi bo'lgan CSS xususiyatini va effekt ta'sir muddati.
Eslatma: Agar Effekt tasir muddati qismi ko'rsatilmagan bo'lsa, transitionning hech qanday ta'siri bo'lmaydi, chunki standart qiymat 0 dir.
Quyidagi misolda 100px * 100px qizil

elementi koʻrsatilgan.

elementi kenglik xususiyati uchun 2 soniya davomiylik bilan o'tish effektini ham belgilab qo'ydim (agar 2 soniya qo'yilmaganda transitions effekti ishlamasdi):
Bunda belgilangan CSS xususiyati (kengligi) qiymatni o'zgartirganda, transitions effekti boshlanadi.
Transition-timing-function xususiyati transitions effektining tezlik egri chizig'ini belgilaydi.
Transition-time-funktsiya xususiyati quyidagi qiymatlarga ega bo'lishi mumkin:
~ease- o'tish effektini sekin boshlash, keyin tez, keyin sekin tugashini belgilaydi (bu standart)
~linear- boshidan oxirigacha bir xil tezlikda o'tish effektini belgilaydi.
~ease-in- sekin boshlash bilan o'tish effektini belgilaydi.
~ease-out- sekin tugaydigan o'tish effektini belgilaydi.
~ease-in-out- sekin boshlanishi va tugashi bilan o'tish effektini belgilaydi.
~cubic-bezier(n,n,n,n)- kub-bezier funktsiyasida o'z qiymatlaringizni aniqlash imkonini beradi.
Quyidagi misolda foydalanish mumkin bo'lgan turli tezlik egri chiziqlari ko'rsatilgan:

Transition-delay xususiyati transitions effekti uchun kechikishni (soniyalarda) belgilaydi. Quyidagi misolda boshlashdan oldin 1 soniya kechikish mavjud:

Biz yuqorida ko'rgan Transition xususiyalarti oddiy va tushunarli. Men endi faqat uning parametrlaridan biriga - vaqt funktsiyasiga to'xtalmoqchiman. Bu funktsiya 4 ta qiymat (x1, y1, x2, y2) - yo'nalish nuqtalari koordinatalarini oladigan Beze egri chiziqlari yordamida o'rnatiladi.Bu funktsiyaning bir nechta maxsus holatlari o'z nomlariga ega, masalan chiziqli. Agar sizga maxsus effekt kerak bo'lsa, siz ushbu generatordan foydalanishingiz mumkin. Men hozirgi misolimda sizga nostandart vaqtinchalik funktsiyadan foydalanish variantini ko'rsataman:

Transitions xususiyatlaridan foydalangan holda HTML va CSS da o'zim tuzgan kod:

Transitions 1.

transitions xususiyati

transitions effektini koʻrish uchun sichqonchani quyidagi div elementi ustiga olib boring: