انیمیشن واکنشگرا
کلاس های انیمیشن W3.CSS
W3.CSS کلاس های زیر برای انیمیشن مهیا شده است.
| کلاس | تعریف |
|---|---|
| w3-animate-top | حرکت کشویی یک عنصر از بالا (300px- تا 0) |
| w3-animate-bottom | حرکت کشویی یک عنصر از پایین(0 تا 300px-) |
| w3-animate-left | حرکت کشویی یک عنصر از چپ(0 تا 300px-) |
| w3-animate-right | حرکت کشویی یک عنصر از راست(0 تا 300px-) |
| w3-animate-opacity | وضوح یک عنصر از 0 تا 1.5 ثانیه تغییر میدهد. |
| w3-animate-zoom | اندازه یک عنصر را از 0 تا 100% تغییر میدهد. |
| w3-animate-fading | وضوح عنصررا از0 تا 1 و از 1 تا0 تغییر میدهد(fades in + fade out) |
| w3-spin | چرخش عناصر به اندازه360 درجه |
متحرک سازی از بالا
کلاس w3-animate-top یک عنصر را از بالا به صورت کشویی می آورد.(از300px- تا 0 )
مثال
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
متحرک سازی از پایین
کلاس w3-animate-bottom یک عنصر را از پایین به صورت کشویی می آورد.(از300px- تا 0 )
مثال
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
متحرک سازی از چپ
کلاس w3-animate-left یک عنصر را از چپ به صورت کشویی می آورد.(از300px- تا 0 )
مثال
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
متحرک سازی از راست
کلاس w3-animate-right یک عنصر را از راست به صورت کشویی می آورد.(از300px- تا 0 )
مثال
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
محو کردن عناصر
کلاس w3-animate-opacity وضوح یک تصویر را از 0 به 1 در مدت زمان 0.8 ثانیه تغییرمیدهد.
کلاس w3-animate-opacity یک عنصر را محو میکند:
بزرگنمایی عناصر
کلاس w3-animate-zoom یک عنصر را از 0 تا 100% از نظر اندازه تغییر میدهد.
کلاس w3-animate-zoom یک عنصر را بزرگنمایی میکند:
چرخش عناصر
کلاس w3-spin یک عنصر را به اندازه 360 درجه می چرخاند:
محو شدن بی نهایت
کلاس w3-animate-fading یک عنصررا در هر 10 ثانیه (به صورت پیوسته) محو می کندو نمایش می دهد:
متحرک سازی به صورت محو شدن و پدیدار شدن
محو کردن همه
مثال
<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">
- نوشته شده توسط زهرا داوودی
- بازدید: 3667
