Animatsiya xususiyatlari

Bu sahifa CSS animatsiya yo‘nalishi (direction), to‘ldirish rejimi (fill mode) va qisqartma xossasini yoritadi.

CSS animation-direction xossasi

animation-direction xossasi animatsiya oldinga, orqaga yoki almashuvchi sikllarda o‘ynatilishini belgilaydi.

animation-direction xossasi quyidagi qiymatlarga ega bo‘lishi mumkin:

normal — animatsiya oddiy holda (oldinga) o‘ynatiladi. Bu standart
reverse — animatsiya teskari yo‘nalishda (orqaga) o‘ynatiladi
alternate — animatsiya avval oldinga, keyin orqaga o‘ynatiladi
alternate-reverse — animatsiya avval orqaga, keyin oldinga o‘ynatiladi

Quyidagi misol animatsiyani teskari yo‘nalishda (orqaga) o‘ynatadi:

Misol

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

O‘zingiz sinab ko‘ring »

Quyidagi misol "alternate" qiymatidan foydalanib, animatsiyaning avval oldinga, keyin orqaga o‘ynashini ta’minlaydi:

Misol

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

O‘zingiz sinab ko‘ring »

Quyidagi misol "alternate-reverse" qiymatidan foydalanib, animatsiyaning avval orqaga, keyin oldinga o‘ynashini ta’minlaydi:

Misol

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

O‘zingiz sinab ko‘ring »

CSS animation-fill-mode xossasi

CSS animatsiyalari birinchi keyframe o‘ynashidan oldin yoki oxirgi keyframe o‘ynashidan keyin elementga ta’sir qilmaydi. animation-fill-mode xossasi bu xatti-harakatni o‘zgartirishi mumkin.

animation-fill-mode xossasi animatsiya o‘ynamayotgan paytda (boshlanishidan oldin, tugashidan keyin yoki ikkalasida) maqsadli element uchun uslub belgilaydi.

animation-fill-mode xossasi quyidagi qiymatlarga ega bo‘lishi mumkin:

none — standart qiymat. Animatsiya ishlashidan oldin yoki keyin elementga hech qanday uslub qo‘llamaydi
forwards — element oxirgi keyframe tomonidan belgilangan uslub qiymatlarini saqlab qoladi (animation-direction va animation-iteration-count ga bog‘liq)
backwards — element birinchi keyframe tomonidan belgilangan uslub qiymatlarini oladi (animation-direction ga bog‘liq) va animation-delay davrida buni saqlab qoladi
both — animatsiya forwards va backwards qoidalariga ergashadi, animatsiya xossalarini ikkala yo‘nalishda ham kengaytiradi

Quyidagi misol <div> elementiga animatsiya tugagach oxirgi kadr (keyframe) uslub qiymatlarini saqlab qolish imkonini beradi:

Misol

div {
width: 100px;
height: 100px;
  background: red;
  position: relative;
  animation-name: myAnimation;
animation-duration: 3s;
animation-fill-mode: forwards;
}

O‘zingiz sinab ko‘ring »

Quyidagi misol <div> elementiga animatsiya boshlanishidan oldin (animation-delay davomida) birinchi kadr (keyframe) tomonidan belgilangan uslub qiymatlarini olish imkonini beradi:

Misol

div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}

O‘zingiz sinab ko‘ring »

Quyidagi misol <div> elementiga animatsiya boshlanishidan oldin birinchi kadr (keyframe) qiymatlarini olish va animatsiya tugagach oxirgi kadr qiymatlarini saqlab qolish imkonini beradi:

Misol

div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}

O‘zingiz sinab ko‘ring »

CSS animatsiya qisqartma xossasi

Quyidagi misol animatsiya xossalarining oltitasidan foydalanadi:

Misol

div {
animation-name: myAnimation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

O‘zingiz sinab ko‘ring »

Yuqoridagi bilan bir xil animatsiya effektiga qisqartma animation xossasi yordamida erishish mumkin:

Misol

div {
animation: myAnimation 5s linear 2s infinite alternate;
}

O‘zingiz sinab ko‘ring »

CSS animatsiya xossalari

Quyidagi jadval @keyframes qoidasi va barcha CSS animatsiya xossalarini sanab o‘tadi:

Xususiyat	Tavsif
@keyframes	Animatsiya kodini belgilaydi
animation	Barcha animatsiya xossalarini belgilash uchun qisqartma xossa
animation-delay	Animatsiya boshlanishi uchun kechikishni belgilaydi
animation-direction	Animatsiya oldinga, orqaga yoki muqobil sikllarda ijro etilishi kerakligini belgilaydi
animation-duration	Animatsiya bir siklni bajarish uchun qancha vaqt ketishi kerakligini belgilaydi
animation-fill-mode	Animatsiya ijro etilmayotgan paytda (boshlanishidan oldin, tugaganidan keyin yoki ikkalasida ham) element uchun uslubni belgilaydi
animation-iteration-count	Animatsiya necha marta ijro etilishi kerakligini belgilaydi
animation-name	@keyframes animatsiyasi nomini belgilaydi
animation-play-state	Animatsiya ishlayotgan yoki to‘xtatilganligini belgilaydi
animation-timing-function	Animatsiya tezligi egri chizig‘ini belgilaydi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish