تخفیف ویژه ماه مبارک رمضان، فرصت یادگیری با 35٪ تخفیف (کد تخفیف: ramazan)

سبد خرید (0)

انیمیشن واکنشگرا

کلاس های انیمیشن 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 )

مثال

<div class="w3-container">
  <h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
خودتان امتحان کنيد »

متحرک سازی از پایین

کلاس  w3-animate-bottom یک عنصر را از پایین به صورت کشویی می آورد.(از300px- تا 0 )

مثال

<div class="w3-container">
  <h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
خودتان امتحان کنيد »

متحرک سازی از چپ

کلاس  w3-animate-left یک عنصر را از چپ به صورت کشویی می آورد.(از300px- تا 0 )

مثال

<div class="w3-container">
  <h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
خودتان امتحان کنيد »

متحرک سازی از راست

کلاس  w3-animate-right یک عنصر را از راست به صورت کشویی می آورد.(از300px- تا 0 )

مثال

<div class="w3-container">
  <h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
خودتان امتحان کنيد »

محو کردن عناصر

کلاس  w3-animate-opacity وضوح یک تصویر را از 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 یک عنصررا در هر 10 ثانیه (به صورت پیوسته) محو می کندو نمایش می دهد:

متحرک سازی به صورت محو شدن و پدیدار شدن

مثال

<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">
خودتان امتحان کنيد »