افکت مربع‌های متحرک

Moving Squares Effect with CSS Animations

دوره: طراحی صد پروژه‌ی انیمیشن و افکت‌ حرکتی با CSS

در این قسمت از این دوره‌ی آموزشی، نحوه‌ی ایجاد انیمشنی را یاد می‌گیریم که می‌تواند به‌عنوان انیمیشن انتظار جهت بارگذاری صفحات مورد استفاده قرار گیرد. این انیمیشن از سه مربع تشکیل شده که در یک مسیر مربعی به دنبال یکدیگر حرکت می‌کنند. در ابتدای ویدئوی آموزشی مربوط به این جلسه، حرکت این مربع‌ها به‌صورت مختصر تحلیل می‌شود تا راحت‌تر بتوان انیمیشن را پیاده‌سازی کرد. سپس با مقداردهی موقعیت‌ مربع‌ها در نقاط زمانی مختلف از اجرای انیمیشن، حرکت مورد نظر ایجاد شده و در نهایت با ایجاد تأخیر روی حرکت هر کدام از این سه مربع، جلوه‌ی حرکت پشت سر هم ایجاد می‌شود.

سطح : مقدماتی تا متوسطه