W3.CSS animatsiyalar
W3.CSS animatsiya klasslari
W3.CSS elementlarni surib chiqarish, asta paydo qilish, kattalashtirish va aylantirish uchun klasslarni taqdim etadi.
Animatsiyani HTML elementga animatsiya klassini to‘g‘ridan-to‘g‘ri qo‘llash orqali qo‘shish mumkin.
W3.CSS animatsiyalar uchun quyidagi klasslarni taqdim etadi:
| Klass | Vazifasi |
|---|---|
w3-animate-top | Elementni yuqoridan surib chiqaradi |
w3-animate-bottom | Elementni pastdan surib chiqaradi |
w3-animate-left | Elementni chapdan surib chiqaradi |
w3-animate-right | Elementni o‘ngdan surib chiqaradi |
w3-animate-opacity | Element shaffofligini 0 dan 1 gacha animatsiya qiladi |
w3-animate-zoom | Element o‘lchamini 0 dan 100% gacha animatsiya qiladi |
w3-animate-fading | Elementni uzluksiz asta paydo qilib, asta yo‘qotadi |
w3-spin | Elementni 360 gradusga aylantiradi |
Yuqoridan animatsiya
w3-animate-top klassi elementni yuqoridan surib chiqaradi:
Misol
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
O‘zingiz sinab ko‘ring »
Pastdan animatsiya
w3-animate-bottom klassi elementni pastdan surib chiqaradi:
Misol
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
O‘zingiz sinab ko‘ring »
Chapdan animatsiya
w3-animate-left klassi elementni chapdan surib chiqaradi:
Misol
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
O‘zingiz sinab ko‘ring »
O‘ngdan animatsiya
w3-animate-right klassi elementni o‘ngdan surib chiqaradi:
Misol
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
O‘zingiz sinab ko‘ring »
Elementlarni asta paydo qilish
w3-animate-opacity klassi elementni asta paydo qiladi:
Elementlarni kattalashtirib chiqarish
w3-animate-zoom klassi elementni kattalashtirib chiqaradi:
Elementlarni aylantirish
w3-spin klassi elementni uzluksiz aylantiradi:
Uzluksiz paydo bo‘lish va yo‘qolish
w3-animate-fading klassi elementni uzluksiz asta paydo qilib, asta yo‘qotadi:
Animate Fade In and Out
Turli animatsiyalar
Misol
<img class="w3-animate-top" src="img_01.jpg">
<img class="w3-animate-zoom" src="img_02.jpg">
<img class="w3-animate-left" src="img_03.jpg">
<img class="w3-animate-bottom" src="img_04.jpg">
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!