فلش‌کارت‌های آموزشی ساخت انیمیشن‌های CSS3 جذاب با ترنزیشن، کی‌فریم، ترانسفورم و جاوااسکریپت

📚 کتاب آموزشی جامع

📚 اطلاعات کتاب

عنوان کتاب: کتاب ساخت انیمیشن‌های CSS3 جذاب با ترنزیشن، کی‌فریم، ترانسفورم و جاوااسکریپت

موضوع کلی: انیمیشن و ترنزیشن در CSS3

موضوع میانی: اصول و تکنیک‌های پیشرفته CSS3 برای ایجاد انیمیشن‌های پویا

📋 سرفصل‌های کتاب (100 موضوع)

• 1. مقدمه ای بر انیمیشن های CSS3
• 2. چرا از انیمیشن های CSS3 استفاده کنیم؟
• 3. مروری بر ابزارهای انیمیشن CSS3
• 4. مفاهیم پایه انیمیشن
• 5. ترنزیشن در CSS3
• 6. آشنایی با پراپرتی transition-property
• 7. تعیین زمان بندی ترنزیشن transition-duration
• 8. منحنی زمان بندی ترنزیشن transition-timing-function
• 9. تاخیر در ترنزیشن transition-delay
• 10. نحوه اعمال ترنزیشن به پراپرتی های مختلف
• 11. مثال های کاربردی ترنزیشن
• 12. ایجاد افکت های هاور با ترنزیشن
• 13. استفاده از ترنزیشن برای تغییر رنگ و اندازه
• 14. انتقال عناصر با ترنزیشن
• 15. انیمیشن های پیچیده تر با ترنزیشن
• 16. محدودیت های ترنزیشن
• 17. کی‌فریم انیمیشن ها در CSS3
• 18. آشنایی با @keyframes rule
• 19. تعریف فریم های کلیدی
• 20. درصدها و کلمات کلیدی from/to
• 21. تنظیم زمان بندی کی‌فریم انیمیشن
• 22. تکرار کی‌فریم انیمیشن ها animation-iteration-count
• 23. جهت کی‌فریم انیمیشن ها animation-direction
• 24. حالت های پایانی کی‌فریم انیمیشن ها animation-fill-mode
• 25. توقف و پخش کی‌فریم انیمیشن ها animation-play-state
• 26. تاخیر در شروع کی‌فریم انیمیشن ها animation-delay
• 27. مثال های کاربردی کی‌فریم انیمیشن
• 28. ایجاد انیمیشن های لودینگ
• 29. انیمیشن های متن
• 30. انیمیشن های عناصر گرافیکی
• 31. انیمیشن های پیچیده با چندین پراپرتی
• 32. ترانسفورم ها در CSS3
• 33. مفهوم ترانسفورم
• 34. ترانسلیت (Translate)
• 35. تغییر مقیاس (Scale)
• 36. چرخش (Rotate)
• 37. کج کردن (Skew)
• 38. ترانسفورم متمرکز (Transform-origin)
• 39. ترکیب ترانسفورم ها
• 40. مثال های کاربردی ترانسفورم
• 41. ایجاد افکت های سه بعدی با ترانسفورم
• 42. انیمیشن های چرخش و مقیاس
• 43. حرکت عناصر در مسیرهای دلخواه
• 44. استفاده از ترانسفورم با ترنزیشن
• 45. استفاده از ترانسفورم با کی‌فریم
• 46. جاوااسکریپت و انیمیشن های CSS3
• 47. نقش جاوااسکریپت در انیمیشن
• 48. فعال کردن/غیرفعال کردن انیمیشن ها با جاوااسکریپت
• 49. کنترل playback انیمیشن ها با جاوااسکریپت
• 50. تغییر پراپرتی های انیمیشن در زمان اجرا
• 51. ایجاد انیمیشن های پویا با جاوااسکریپت
• 52. استفاده از رویدادهای DOM برای شروع انیمیشن
• 53. مدیریت رویدادهای پایان انیمیشن
• 54. کتابخانه ها و فریمورک های انیمیشن
• 55. معرفی برخی کتابخانه های محبوب
• 56. استفاده از GSAP (GreenSock Animation Platform)
• 57. استفاده از Anime.js
• 58. مقایسه روش های مختلف انیمیشن
• 59. نکات پیشرفته و بهینه سازی
• 60. تجربه کاربری (UX) در انیمیشن
• 61. اهمیت انیمیشن های روان
• 62. جلوگیری از انیمیشن های آزاردهنده
• 63. بهینه سازی عملکرد انیمیشن
• 64. استفاده از CSS Variables در انیمیشن
• 65. انیمیشن های دسترسی پذیر (Accessibility)
• 66. تست و دیباگ انیمیشن ها
• 67. مرورگرهای مختلف و سازگاری
• 68. نکات امنیتی در انیمیشن
• 69. پروژه های عملی
• 70. ساخت یک اسلایدر با انیمیشن
• 71. ایجاد یک دکمه تعاملی با انیمیشن
• 72. انیمیشن یک فرم ثبت نام
• 73. ساخت یک صفحه فرود (Landing Page) جذاب
• 74. انیمیشن یک بازی ساده با CSS
• 75. جمع بندی و مراحل بعدی
• 76. مرور کلی آموخته ها
• 77. منابع بیشتر برای یادگیری
• 78. ادامه مسیر در دنیای انیمیشن CSS