CSS animatsiyalar

CSS animatsiyalari

CSS JavaScript’siz HTML elementlarini animatsiya qilish imkonini beradi!

CSS

CSS animatsiyalari nima?

Animatsiya elementni asta-sekin bir uslubdan boshqasiga o‘zgartirish imkonini beradi.

Xohlagancha CSS xossasini xohlagancha marta o‘zgartirishingiz mumkin.

CSS animatsiyadan foydalanish uchun animatsiya uchun bir nechta keyframe belgilashingiz kerak.

Keyframes element ma’lum vaqtlarda qanday uslublarga ega bo‘lishini saqlaydi.

CSS animation-name va animation-duration

animation-name xossasi animatsiya uchun nom belgilaydi.

animation-duration xossasi animatsiyaning tugash vaqtini belgilaydi. Agar bu xossa ko‘rsatilmasa, animatsiya sodir bo‘lmaydi, chunki standart qiymat 0s (0 sekund).

CSS @keyframes qoidasi

@keyframes qoidasi ichida CSS uslublarini belgilasangiz, animatsiya ma’lum vaqtlarda joriy uslubdan yangi uslubga asta-sekin o‘tadi.

Animatsiya ishlashi uchun uni elementga bog‘lash kerak.

Quyidagi misol "myAnimation" animatsiyasini <div> elementiga bog‘laydi. Animatsiya 4 sekund davom etadi va <div> elementining fon rangini "qizil"dan "sariq"ga asta-sekin o‘zgartiradi:

Misol

/* The animation code */
@keyframes myAnimation {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}

O‘zingiz sinab ko‘ring »

Yuqoridagi misolda @keyframes qoidasida "from" va "to" kalit so‘zlaridan foydalanilgan — bu 0% (boshlanish) va 100% (tugash)ni anglatadi.

Foizdan foydalanish ham mumkin. Foiz yordamida xohlagancha uslub o‘zgarishini qo‘shishingiz mumkin.

Quyidagi misol animatsiya 25% ga, 50% ga va yana 100% ga yetganda <div> elementining fon rangini o‘zgartiradi:

Misol

@keyframes myAnimation {
  0%   {background-color: red;}
25% {background-color: yellow;}
  50% {background-color: blue;}
  100% {background-color: green;}
}

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

O‘zingiz sinab ko‘ring »

Quyidagi misol animatsiya 25% ga, 50% ga va yana 100% ga yetganda <div> elementining fon rangi va joylashuvini o‘zgartiradi:

Misol

@keyframes myAnimation {
  0%   {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

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

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish