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

وهذا الشرح والكود إعداد حصري لكن مدون
من المعاينة التالية يمكنك رؤية مثال تقريبي لفكرة عمل هذه التأثيرات شاهده ولا تنسى التمرير لأسفل حتى نهاية الصفحة لترى بعض التأثيرات
كيف يمكن عمل تلك التأثيرات ؟
أول شئ استخدم الكود التالي في قالبككل ما عليك فعله هو استخدام الكلاس التالي
رمز # يستبدل بإسم الحركة
مثال لو لدينا صورة نريد ان نطبق عليها الحركة سيصبح كودها كالتالي
كما تلاحظ كلمة tada هو إسم الحركةtada" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDm59CSyeRB_W-ZcBeEfJhrVHnSzMKTfhXmumeJDuL3Q8SDKQk9g9Cypmo1taezVtsOlZGP0CZ1oELinKgKKfXWRGyzUzUUeOQ_-bg8ODCr4yPE-EKY1adU8jj8VFCCNdeKt4yQnOW7t_m/s1600/256%25D8%25A1256.png"/>
كيف نحصل على اسم الحركة
ببساطة من الموقع التاليhttp://daneden.github.io/animate.css
ستجد معاينة لكل الحركات وأسمائها فقط اكتب اسم الحركة وطبقه على ما تريد يجب أن تكتب الإسم مضبوط
إضغط هنا لفتح قائمة أسماء قابلة للنسخ
مثال آخر لو اردنا تطبيق حركة معينة على مواضيع المدونة بحيث كلما تم التمرير لأسفل يحدث التأثير على الموضوع
أغلب قوالب بلوجر تعتمد على هذا الكود كحاكم للمواضيع
كل ما عليك فعله تطبيق الكود فيصبح
طبعا يمكنك تعديل التأثير الحركي بالتأثير الذي تريد
ملحوظة قد يكون الكود متكرر في القالب فيجب التطبيق عليهم جميعا أو التجربة حتى تجد الصحيح