transition
Misol
Kengligini 100px dan 300px gacha asta-sekin o‘zgartirish uchun sichqonchani <div> elementi ustiga olib boring:
div {
width: 100px;
transition: width 2s;
}
div:hover {
width: 300px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
transition xususiyati quyidagilar uchun qisqartma xususiyatdir:
Eslatma: Har doim transition-duration xususiyatini ko‘rsating, aks holda davomiylik 0s bo‘ladi va o‘tish hech qanday effekt bermaydi.
| Standart qiymat: | all 0s ease 0s |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.transition="all 2s" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| transition | 26 | 12 | 16 | 9 | 12.1 |
CSS sintaksisi
transition: property duration timing-function delay|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| transition-property | O‘tish effekti qo‘llaniladigan CSS xususiyatining nomini belgilaydi |
| transition-duration | O‘tish effekti tugashi uchun necha soniya yoki millisoniya ketishini belgilaydi |
| transition-timing-function | O‘tish effektining tezlik egri chizig‘ini belgilaydi |
| transition-delay | O‘tish effekti qachon boshlanishini belgilaydi |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
<input type="text"> fokus olganda, uning kengligini 100px dan 250px gacha asta-sekin o‘zgartiring:
input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS o‘tishlar
HTML DOM ma’lumotnomasi: transition xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!