O‘tish vaqti funksiyasi

CSS o‘tish tezlik egri chizig‘i

transition-timing-function xossasi o‘tish effektining tezlik egri chizig‘ini belgilaydi.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

ease — o‘tish sekin boshlanadi, keyin tezlashadi va sekin tugaydi (bu standart)
linear — o‘tish boshidan oxirigacha bir xil tezlikni saqlaydi
ease-in — o‘tish sekin boshlanadi
ease-out - transition will end slow
ease-in-out — o‘tish sekin boshlanadi va sekin tugaydi
cubic-bezier(n,n,n,n) — cubic-bezier funksiyasida o‘z qiymatlaringizni belgilash imkonini beradi

Quyidagi misol ishlatilishi mumkin bo‘lgan turli tezlik egri chiziqlarini ko‘rsatadi:

Misol

O‘tish uchun ba’zi turli tezlik egri chiziqlari:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

O‘zingiz sinab ko‘ring »

CSS o‘tish kechikishi (delay)

transition-delay xossasi o‘tish boshlanishidan oldingi kechikishni belgilaydi.

transition-delay qiymati sekundlarda (s) yoki millisekundlarda (ms) belgilanadi.

Quyidagi misol boshlanishidan oldin 1 sekund kechikishga ega:

Misol

Boshlanishidan oldin 1 sekund kechikish qo‘shish:

div {
transition-delay: 1s;
}

O‘zingiz sinab ko‘ring »

O‘tish + Transformatsiya

Quyidagi misol <div> uchun transition va transform’ni birlashtiradi:

Misol

div {
transition: width 2s, height 2s, background-color 2s, transform 2s;
}

O‘zingiz sinab ko‘ring »

Quyidagi misol tugma uchun transition va transform’ni birlashtiradi:

Misol

button {
transition: background-color 1s ease-out, transform 1s ease-out;
}

O‘zingiz sinab ko‘ring »

Ko‘proq o‘tish misollari

CSS transition xossalarini bittadan, mana bunday belgilash mumkin:

Misol

div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

O‘zingiz sinab ko‘ring »

yoki transition qisqartma xossasidan foydalanib:

Misol

div {
transition: width 2s linear 1s;
}

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!

Ro'yxatdan o'tish Kirish