CSS Animations — دليل المبتدئين للتحريك الأنيق
تعلم كيف تضيف حركات أنيقة لموقعك باستخدام CSS transitions و animations
M
Moparmegلماذا الحركات مهمة؟
الحركات الأنيقة تجعل موقعك يبدو حياً واحترافياً. لكن الإفراط فيها يشتت الزائر. القاعدة: أنيقة ومحسوبة.
Transitions vs Animations
Transitions
للتحولات البسيطة عند hover أو focus. مثال: transition: all 0.3s ease
Keyframe Animations
للحركات المعقدة والمتكررة. مثال: pulse، bounce، fadeIn.
أمثلة عملية مع Tailwind
- Hover scale:
hover:scale-105 transition-transform duration-300 - Fade in:
animate-fadeIn(مع @keyframes مخصص) - Scroll animation: IntersectionObserver + CSS classes
نصيحة ذهبية
استخدم transition-all duration-300 على كل عنصر تفاعلي. هذا يعطي شعور سلس بدون أي جهد إضافي.
#CSS#animations#تفاعل
