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

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

مقدمه Introduction

• خوش آمدی Welcome

• آنچه باید قبل از تماشای این دوره بدانید What you should know before watching this course

• پیشوندهای فروشنده و پشتیبانی مرورگر Vendor prefixes and browser support

• با استفاده از پرونده های تمرینی Using the exercise files

1. بررسی اجمالی از تغییرات و تحولات CSS 1. Overview of CSS Transitions and Transforms

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

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

• انتقال CSS CSS transitions

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

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

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

• مبانی انیمیشن Animation basics

• از حالت انیمیشن-تأخیر و پر کردن انیمیشن استفاده کنید Use animation-delay and animation-fill-mode

• از جهت انیمیشن استفاده کنید Use animation-direction

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

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

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

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

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

• عنصر را به جای خود تحریک کنید Animate an element into place

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

• تحولات 3D متحرک Animate 3D transforms

• تصویری را برای استفاده به عنوان اسپریت آماده کنید Prepare an image to use as a sprite

• تصاویر Sprite را با مراحل متحرک کنید Animate sprite images with steps

• زنجیره انیمیشن های متعدد Chain multiple animations

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

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

4- استفاده از انیمیشن های CSS در SVG 4. Applying CSS Animations to SVG

• SVG را برای انیمیشن آماده کنید Prepare an SVG for animation

• SVG را از Illustrator صادر کنید Export SVG from Illustrator

• SVG را با CSS تحریک کنید Animate SVG with CSS

5- عملکرد ، پشتیبانی مرورگر و Fallbacks 5. Performance, Browser Support, and Fallbacks

• چه موقع از انیمیشن های CSS استفاده کنیم When to use CSS animations

• انیمیشن های با کارایی بالا High-performance animations

• سازماندهی کد و خطاهای مختلف Code organization and fallbacks

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

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

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

نتیجه Conclusion

• مراحل بعدی Next steps