شرح التأثيرات الحركية CSS Animation

مجال التأثيرات الحركية مجال واسع جداً ومن الصعب ان يتم شرحه بالكامل لأنه يعتمد على جزء كبير في لغة CSS لكن هناك حل سهل وبسيط يعتمد عليه أغلب المستخدمون للتأثيرات وهو عبر التأثيرات الجاهزة 

وهذا الشرح والكود إعداد حصري لكن مدون 

 من المعاينة التالية يمكنك رؤية مثال تقريبي لفكرة عمل هذه التأثيرات شاهده ولا تنسى التمرير لأسفل حتى نهاية الصفحة لترى بعض التأثيرات

معاينة

كيف يمكن عمل تلك التأثيرات ؟

أول شئ استخدم الكود التالي في قالبك
<link href='http://cnmu.googlecode.com/svn/trunk/2015/animate.css' rel='stylesheet' type='text/css'/>
<script src='https://googledrive.com/host/0B9wf6r4PTnMianRNWmU0VFdhVHc' type='text/javascript'/>
كل ما عليك فعله هو استخدام الكلاس التالي
class="wow animated #"
رمز # يستبدل بإسم الحركة
مثال لو لدينا صورة نريد ان نطبق عليها الحركة سيصبح كودها كالتالي

<img class="wow animated tada" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdfzJaAWYUYsI6x6BolsaTlhIGFhVQBbufQYvnFP5ie7_QGOGk8uzwEyaC-auMWLZXHqo58QUC4hnc8XuqXcrkGBioDDtrOHmH67_kh123_18pFBNMtchHkbMd5AlMxA2CYEvvDD0JD4b7/s1600/256%25D8%25A1256.png"/>

كما تلاحظ كلمة tada هو إسم الحركة

كيف نحصل على اسم الحركة

ببساطة من الموقع التالي
http://daneden.github.io/animate.css
ستجد معاينة لكل الحركات وأسمائها فقط اكتب اسم الحركة وطبقه على ما تريد يجب أن تكتب الإسم مضبوط
إضغط هنا لفتح قائمة أسماء قابلة للنسخ
مثال آخر لو اردنا تطبيق حركة معينة على مواضيع المدونة بحيث كلما تم التمرير لأسفل يحدث التأثير على الموضوع
أغلب قوالب بلوجر تعتمد على هذا الكود كحاكم للمواضيع
<div class='post-outer'>
كل ما عليك  فعله تطبيق الكود فيصبح
<div class='post-outer wow animated fadeInUp'>
طبعا يمكنك تعديل التأثير الحركي بالتأثير الذي تريد
ملحوظة قد يكون الكود متكرر في القالب فيجب التطبيق عليهم جميعا أو التجربة حتى تجد الصحيح