CSS o‘tishlar
CSS o‘tishlar (transitions)
CSS o‘tishlari (transitions) xossa qiymatlarini berilgan davomiylik davomida silliq o‘zgartirish imkonini beradi.
CSS o‘tish effektini ko‘rish uchun quyidagi element sichqonchasini ustiga olib boring:
CSS transition xossasi
O‘tish effekti yaratish uchun o‘tish qo‘shmoqchi bo‘lgan CSS xossasini va o‘tish davomiyligini ko‘rsatish kerak.
CSS transition xossasi quyidagilarning qisqartma xossasidir:
CSS transition misoli
Quyidagi misolda 100px * 100px o‘lchamli <div> element ko‘rsatilgan. <div> elementi width xossasi uchun 2 sekund davom etadigan o‘tish (transition) effekti belgilangan:
Misol
div
{
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
O‘tish (transition)ni qanday ishga tushirish
O‘tish element xossalarida o‘zgarish bo‘lganda ishga tushadi. Bu ko‘pincha psevdo-klasslar ichida sodir bo‘ladi (:hover, :active, :focus yoki :checked).
Demak, yuqoridagi koddan, o‘tish effekti width xossasi qiymati o‘zgarganda ishga tushadi.
Endi foydalanuvchi sichqonchani <div> element ustiga olib borganda width xossasining yangi qiymatini belgilovchi div:hover klassini qo‘shamiz:
Kursor elementdan chiqib ketganda, uslub asta-sekin asl holatiga qaytishiga e’tibor bering.
Bir nechta xossa qiymatlarini o‘zgartirish
Bir nechta xossani vergul bilan ajratib o‘zgartirishingiz mumkin.
Quyidagi misol width, height va background-color xossalari uchun o‘tish effektini qo‘shadi: width uchun 2 sekund, height uchun 4 sekund, background-color uchun 3 sekund davomiylik bilan:
Misol
width, height va background-color xossalari uchun o‘tish effekti qo‘shish:
div
{
transition: width 2s, height 4s, background-color 3s;
}
O‘zingiz sinab ko‘ring »
CSS o‘tish xossalari
Quyidagi jadval barcha CSS transition xossalarini sanab o‘tadi:
| Xususiyat | Tavsif |
|---|---|
| transition | To‘rtta transition xususiyatini bitta xususiyatda o‘rnatish uchun qisqartma xususiyat |
| transition-delay | O‘tish (transition) effekti uchun kechikishni (soniyalarda) belgilaydi |
| transition-duration | O‘tish effekti necha soniya yoki millisekundda bajarilishini belgilaydi |
| transition-property | O‘tish effekti uchun CSS xususiyati nomini belgilaydi |
| transition-timing-function | O‘tish effektining tezlik egri chizig‘ini belgilaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!