2. css ning afzalliklari

Keling, HTMLda "element" klassi bilan element yarataylik:

CSS da esa ushbu element uchun changeColor nomli animatsiya yozamiz, u bizga element rangini qizildan ko'kga o'zgartirish uchun kerak;

@keyframes changeColor {

0% {

background-color: red;

}

100% {

background-color: blue;

}

}

Bu yerda 0% - animatsiyaning boshlanishi, 100% - animatsiyaning oxiri. CSS ushbu vaqt orasidagi barcha siz tanlagan xususiyatlarni avtomatik ravishda ishga tushiradi. Bunday holda, bir maromda rang o'zgarishi bo'ladi.

Keling, ushbu animatsiyani 'element' uchun CSS stillarida animatsiya xususiyati sifatida qo'shamiz. Bizning CSS quyidagicha bo'ladi:

.element {

animation: changeColor 2s infinite;

}

Biz qo'shimcha xususiyatlar bilan animatsiyani boshqarishimiz mumkin.

Ushbu misolda animatsiya nomidan keyin biz animatsiya tezligini (2s) va takrorlashlar sonini (bu holda cheksiz takrorlanishlar soni) belgilab oldik.

Bir nechta animatsiya xususiyatlari mavjud. Keling, ularning har birini ko'rib chiqaylik:

- animation-name: keyframes bilan belgilangan animatsiya nomi
- animation-duration: 0% dan 100% gacha bo'lgan bir animatsiya tsikli uchun qancha vaqt ketadi shuni belgilaydi sukund va millisekundlarda qiymat qabul qiladi (1s yoki 1000ms)
- animation-timing-function: animatsiya ijrosini tezligini belgilash uchun zarur
- animation-delay: sahifa yuklangandan so'ng animatsiya qancha vaqt kutib keyin ishga tushishini sekund yoki millisekundlarda belgilash mumkin
- animation-direction: animatsiya yo'nalishini belgilaydi. Odatiy holda, animatsiya 0% dan 100% gacha boradi. Ushbu xususiyatdan foydalanib, siz animatsiyani teskari yo'nalishda 100% dan 0% gacha o'tkazishingiz yoki har safar yo'nalishni o'zgartirishingiz mumkin.
- animation-iteration-count: Animatsiya siklining takrorlanishlar soni. Siz uni raqamlarda ko'rsatishingiz yoki animatsiyani cheksiz takrorlash uchun infinite ni belgilashingiz mumkin.
- animation-fill-mode: Animatsiya tugashidan oldin yoki keyin biriktiriladigan qiymatni o'rnatadi. Misol uchun, barcha animatsiya tsikllari tugagandan so'ng, elementning foni yashil bo'lishini belgilashingiz mumkin.
- animation-play-state: animatsiyani play/pause qilish