الرسوم المتحركة W3.CSS
الرسوم المتحركة ممتعة!
فئات الرسوم المتحركة W3.CSS
يوفر W3.CSS الفئات التالية للرسوم المتحركة:
| فصل | يعرّف |
|---|---|
| w3- تحريك القمة | الشرائح في عنصر من الأعلى (-300 بكسل إلى 0) |
| w3- تحريك القاع | الشرائح في عنصر من الأسفل (-300 بكسل إلى 0) |
| w3- تحريك اليسار | الشرائح في عنصر من اليسار (-300 بكسل إلى 0) |
| w3-تحريك-اليمين | الشرائح في عنصر من اليمين (-300 بكسل إلى 0) |
| w3- تحريك-عتامة | تحريك تعتيم عنصر من 0 إلى 1 في 0.8 ثانية |
| w3- تحريك-تكبير | ينعش عنصر من 0 إلى 100٪ في الحجم |
| w3- تحريك- يتلاشى | تحريك تعتيم عنصر من 0 إلى 1 ومن 1 إلى 0 (يتلاشى للداخل + يتلاشى) |
| w3-تدور | يدور عنصر 360 درجة |
تحريك الأعلى
شرائح فئة w3-animate-top في عنصر من الأعلى (من -300 بكسل إلى 0):
مثال
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
تحريك القاع
شرائح فئة w3-animate-bottom في عنصر من الأسفل (من -300 بكسل إلى 0):
مثال
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
تحريك اليسار
شرائح فئة w3-animate-left في عنصر من اليسار (-300 بكسل إلى 0):
مثال
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
تحريك الحق
شرائح فئة w3-animate-right في عنصر من اليمين (-300 بكسل إلى 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">