آموزش CSS: انیمیشن

سرفصل ها و درس ها

معرفی Introduction

• مزایای انیمیشن CSS CSS animation advantages

• استفاده از GitHub Codespaces با این دوره Using GitHub Codespaces with this course

1. مروری بر CSS Transitions and Transforms 1. Overview of CSS Transitions and Transforms

• مبانی تبدیل CSS CSS transform basics

• انتقال CSS CSS transitions

• راه حل: اضافه کردن یک انتقال Solution: Adding a transition

• چالش: اضافه کردن یک انتقال Challenge: Adding a transition

• تبدیل های سه بعدی ساده Simple 3D transforms

2. درک انیمیشن های CSS 2. Understanding CSS Animations

• نگاهی دقیق تر به حالت پر کردن انیمیشن A closer look at animation-fill-mode

• تابع زمان بندی Steps(). The steps() timing function

• انیمیشن-تاخیر و انیمیشن-پر-حالت animation-delay and animation-fill-mode

• توابع زمان بندی و سهولت Timing functions and easing

• راه حل: افزودن فریم های کلیدی به یک انیمیشن Solution: Adding keyframes to an animation

• چالش: افزودن فریم های کلیدی به یک انیمیشن Challenge: Adding keyframes to an animation

• انیمیشن- جهت animation-direction

• اصول انیمیشن فریم کلیدی CSS CSS keyframe animation fundamentals

3. بلوک های ساخت انیمیشن CSS 3. CSS Animation Building Blocks

• زنجیره‌ای کردن چندین انیمیشن فریم کلیدی Chaining multiple keyframe animations

• متحرک سازی تبدیل های سه بعدی Animating 3D transforms

• انیمیشن های بی نهایت حلقه Infinitely looping animations

• راه حل: اضافه کردن یک انیمیشن سوم به زنجیره Solution: Adding a third animation to the chain

• مکث کنید و با انیمیشن-play-state بازی کنید Pause and play with animation-play-state

• چالش: اضافه کردن یک انیمیشن سوم به زنجیره Challenge: Adding a third animation to the chain

4. متحرک سازی SVG با CSS 4. Animating SVGs with CSS

• آماده سازی SVG برای انیمیشن Preparing an SVG for animation

• متحرک سازی SVG با CSS Animating SVG with CSS

• تنظیمات صادرات و بهینه سازی SVG SVG exporting and optimization settings

5. تکنیک های پیشرفته انیمیشن CSS 5. Advanced CSS Animation Techniques

• ایجاد یک مسیر حرکت برای CSS با offset-path Creating a motion path for CSS with offset-path

• متحرک سازی فونت های متغیر با CSS Animating variable fonts with CSS

• انیمیشن پویا CSS با متغیرهای CSS Dynamic CSS animation with CSS variables

• متحرک کردن مسیر حرکت CSS با مسیر افست Animating CSS motion path with offset-path

6. ابزارهایی برای ایجاد انیمیشن های CSS 6. Tools for Creating CSS Animations

• با استفاده از ابزارهای بازرسی انیمیشن مرورگر Using browser animation inspection tools

نتیجه Conclusion

• ابزارهای آنلاین مفید برای CSS Helpful online tools for CSS