فلش‌کارت‌های آموزشی جادوی حرکت: انیمیشن و ترنزیشن در CSS

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره جادوی حرکت: انیمیشن و ترنزیشن در CSS

موضوع کلی: طراحی وب

موضوع میانی: CSS و استایل‌دهی

📋 سرفصل‌های دوره

• 1. مقدمه‌ای بر انیمیشن و ترنزیشن در CSS
• 2. چرا از انیمیشن و ترنزیشن استفاده کنیم؟
• 3. تفاوت ترنزیشن و انیمیشن
• 4. پایه‌های CSS برای انیمیشن: Keyframes
• 5. ایجاد ترنزیشن ساده: تغییر رنگ پس‌زمینه
• 6. کنترل مدت زمان ترنزیشن: duration
• 7. تنظیم سرعت ترنزیشن: timing-function
• 8. انواع Timing Function در CSS (linear, ease, ease-in, ease-out, ease-in-out)
• 9. تاخیر در شروع ترنزیشن: delay
• 10. استفاده از ترنزیشن برای تغییر ابعاد عناصر
• 11. ترنزیشن چندگانه: اعمال ترنزیشن روی چندین ویژگی
• 12. مقدمه‌ای بر Keyframes: تعریف مراحل انیمیشن
• 13. ایجاد انیمیشن ساده: حرکت یک عنصر
• 14. کنترل تکرار انیمیشن: iteration-count
• 15. تکرار بی‌نهایت انیمیشن: infinite
• 16. مکث بین تکرارها: iteration-delay
• 17. جهت انیمیشن: direction (normal, reverse, alternate, alternate-reverse)
• 18. تغییر سرعت انیمیشن: animation-timing-function
• 19. پر کردن حالت‌های انیمیشن: animation-fill-mode (none, forwards, backwards, both)
• 20. انیمیشن‌های پیچیده: ترکیب Keyframes
• 21. انیمیشن‌های تعاملی: واکنش به رویدادهای کاربر (hover, focus)
• 22. استفاده از transform در انیمیشن‌ها: translate, rotate, scale
• 23. استفاده از background در انیمیشن‌ها: تغییر تصویر پس‌زمینه
• 24. انیمیشن با استفاده از CSS variables (Custom Properties)
• 25. بهینه‌سازی انیمیشن‌ها برای عملکرد بهتر
• 26. استفاده از will-change برای بهبود عملکرد
• 27. انیمیشن‌های responsive: تطبیق با اندازه‌های مختلف صفحه
• 28. ایجاد افکت لودینگ با انیمیشن CSS
• 29. انیمیشن‌های پیشرفته: انیمیشن‌های پیچیده با Keyframes متعدد
• 30. ایجاد انیمیشن‌های scroll-triggered (انیمیشن با اسکرول)
• 31. انیمیشن‌های parallax با CSS
• 32. استفاده از انیمیشن برای ایجاد رابط کاربری جذاب
• 33. ساخت منوی انیمیشنی با CSS
• 34. ساخت اسلایدر با انیمیشن CSS
• 35. انیمیشن‌های hover برای دکمه‌ها و لینک‌ها
• 36. ایجاد افکت تایپ‌نویسی با انیمیشن CSS
• 37. انیمیشن‌های transition برای فرم‌ها
• 38. استفاده از CSS animation در طراحی کارت‌ها
• 39. انیمیشن‌های بارگذاری پیشرفته
• 40. ایجاد افکت‌های بصری جذاب با انیمیشن CSS
• 41. انیمیشن‌های SVG با CSS
• 42. تکنیک‌های پیشرفته برای کنترل انیمیشن‌ها
• 43. عیب‌یابی و رفع مشکلات انیمیشن‌های CSS
• 44. منابع و ابزارهای مفید برای انیمیشن CSS