animation
Misol
Qisqartma xususiyat yordamida animatsiyani <div> elementiga bog‘lash:
div {
animation: mymove 5s infinite;
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
animation xususiyati quyidagilar uchun qisqartma xususiyatdir:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Eslatma: Har doim animation-duration xususiyatini belgilang, aks holda davomiylik 0 bo‘ladi va animatsiya hech qachon ijro etilmaydi.
| Standart qiymat: | none 0 ease 0 1 normal none running |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.animation="mymove 5s infinite" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| animation | 43 | 10 | 16 | 9 | 30 |
CSS sintaksisi
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| animation-name | Selektorga bog‘lamoqchi bo‘lgan keyframe nomini belgilaydi |
| animation-duration | Animatsiya tugashi uchun necha soniya yoki millisoniya ketishini belgilaydi |
| animation-timing-function | Animatsiyaning tezlik egri chizig‘ini belgilaydi |
| animation-delay | Animatsiya boshlanishidan oldingi kechikishni belgilaydi |
| animation-iteration-count | Animatsiya necha marta ijro etilishi kerakligini belgilaydi |
| animation-direction | Animatsiya navbatma-navbat sikllarda teskari yo‘nalishda ijro etilishi kerakmi yoki yo‘qligini belgilaydi |
| animation-fill-mode | Animatsiya bajarilmayotgan vaqtda qanday qiymatlar qo‘llanishini belgilaydi |
| animation-play-state | Animatsiya ishlayotgani yoki pauza qilinganini belgilaydi |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Tegishli sahifalar
CSS darsligi: CSS animatsiyalar
HTML DOM ma’lumotnomasi: animation xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!