W3.CSS Animations
W3.CSS Animation သင်တန်းများ
W3.CSS သည် ကာတွန်းများအတွက် အောက်ပါအတန်းများကို ပံ့ပိုးပေးသည်-
| အတန်း | သတ်မှတ်ပါတယ်။ |
|---|---|
| w3-animate-ထိပ်တန်း | အပေါ်မှ ဒြပ်စင်တစ်ခုရှိ ဆလိုက်များ (-300px မှ 0) |
| w3-animate-အောက်ခြေ | အောက်ခြေမှ ဒြပ်စင်တစ်ခုရှိ ဆလိုက်များ (-300px မှ 0) |
| w3-animate-ဘယ်ဘက် | ဘယ်ဘက်မှ အစိတ်အပိုင်းတစ်ခုရှိ ဆလိုက်များ (-300px မှ 0) |
| w3- လှုပ်ရှား-မှန်သည်။ | ညာဘက်မှ ဒြပ်စင်တစ်ခုရှိ ဆလိုက်များ (-300px မှ 0) |
| w3-animate-opacity | ဒြပ်စင်တစ်ခု၏ အလင်းပိတ်မှုကို 0 မှ 1 မှ 0.8 စက္ကန့်အတွင်း လှုပ်ရှားစေသည်။ |
| w3-animate-zoom | ဒြပ်စင်တစ်ခုအား 0 မှ 100% အရွယ်အစားအထိ လှုပ်ရှားစေသည်။ |
| w3-သက်ဝင်လှုပ်ရှား-နွမ်း | ဒြပ်စင်တစ်ခု၏ ပွင့်လင်းမြင်သာမှုကို 0 မှ 1 နှင့် 1 မှ 0 သို့ သက်ဝင်လှုပ်ရှားစေသည် (မှိန်သွားသည် + မှိန်သွားသည်) |
| w3-လှည့်ဖျား | ဒြပ်စင်တစ်ခုကို 360 ဒီဂရီလှည့်ပါ။ |
Animate ထိပ်တန်း
w3-animate-top class သည် ထိပ်မှ ဒြပ်စင်တစ်ခု (-300px မှ 0 မှ 0) သို့ လျှောကျသွားသည်။
ဥပမာ
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Animate အောက်ခြေ
w3-animate-bottom class သည် အောက်ခြေ (-300px မှ 0 မှ 0) အတွင်း ဒြပ်စင်တစ်ခုသို့ လျှောကျသွားသည်။
ဥပမာ
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Animate ဝဲ
w3-animate-left class သည် ဘယ်ဘက်မှ (-300px မှ 0 သို့) ဒြပ်စင်တစ်ခုသို့ လျှောလိုက်သည်-
ဥပမာ
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Animate Right
w3-animate-right အတန်း သည် ညာဘက် (-300px မှ 0 သို့) ဒြပ်စင်တစ်ခုတွင် ဆလိုက်လိုက်သည်-
ဥပမာ
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
ဒြပ်စင်များတွင်မှိန်
w3-animate-opacity class သည် ဒြပ်စင်တစ်ခု၏ အလင်းပိတ်မှုကို 0 မှ 1 မှ 0.8 စက္ကန့်အတွင်း လှုပ်ရှားစေသည်။
w3-animate-opacity အတန်း နှင့်အတူ ဒြပ်စင်တစ်ခုတွင် အရောင်မှိန်သွားသည် -
ဥပမာ
<div class="w3-animate-opacity">..</div>
ဒြပ်စင်များကို ချဲ့ပါ။
w3-animate-zoom အတန်း သည် အရွယ်အစား 0 မှ 100% အတွင်း ဒြပ်စင်တစ်ခုကို လှုပ်ရှားစေသည်။
w3-animate-zoom အတန်း ဖြင့် ဒြပ်စင်တစ်ခုအား ဇူးမ်ချဲ့ပါ။
ဥပမာ
<div class="w3-animate-zoom">..</div>
အလှည့်အပြောင်းများ
w3-spin အတန်းသည် ဒြပ်စင်တစ်ခုအား 360 ဒီဂရီ လှည့ ် သွားသည်-
ဥပမာ
<div class="w3-spin">..</div>
နွမ်းနယ်ခြင်း အနန္တ
w3-animate-fading class သည် 10 စက္ကန့်တိုင်း ဒြပ်စင်တစ်ခု မှိန်သွားသည် (ဆက်တိုက်)
Animate Fade In and Out
ဥပမာ
<div class="w3-animate-fading">..</div>
အရောင်မှိန်သမျှ
ဥပမာ
<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">