Animatsiya vaqti

CSS animation-delay xossasi

animation-delay xossasi animatsiya boshlanishi uchun kechikishni belgilaydi.

Quyidagi misolda animatsiya boshlanishidan oldin 2 sekund kechikish bor:

Misol

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-delay: 2s;
}

O‘zingiz sinab ko‘ring »

Manfiy qiymatlar ham mumkin. Manfiy qiymat ishlatilsa, animatsiya allaqachon N sekund o‘ynagandek boshlanadi.

Quyidagi misolda animatsiya allaqachon 2 sekund o‘ynagandek boshlanadi:

Misol

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-delay: -2s;
}

O‘zingiz sinab ko‘ring »

CSS animation-iteration-count xossasi

animation-iteration-count xossasi animatsiyaning necha marta o‘ynashini belgilaydi.

Quyidagi misol animatsiyani to‘xtashidan oldin 3 marta o‘ynatadi:

Misol

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

O‘zingiz sinab ko‘ring »

Quyidagi misol "infinite" qiymatidan foydalanib, animatsiyaning abadiy davom etishini ta’minlaydi:

Misol

div {
width: 100px;
height: 100px;
position: relative;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
animation-iteration-count: infinite;
}

O‘zingiz sinab ko‘ring »

CSS animation-timing-function xossasi

animation-timing-function xossasi animatsiyaning tezlik egri chizig‘ini belgilaydi.

animation-timing-function xossasi quyidagi qiymatlarga ega bo‘lishi mumkin:

ease — sekin boshlanadigan, keyin tezlashadigan va sekin tugaydigan animatsiyani belgilaydi (bu standart)
linear — boshidan oxirigacha bir xil tezlikdagi animatsiyani belgilaydi
ease-in — sekin boshlanadigan animatsiyani belgilaydi
ease-out — sekin tugaydigan animatsiyani belgilaydi
ease-in-out — sekin boshlanadigan va sekin tugaydigan animatsiyani belgilaydi
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

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

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish