آموزش راهنمای نهایی انیمیشن‌ها، تبدیل‌ها و انتقال‌ها در CSS3

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

معرفی Introduction

• بررسی اجمالی دوره Course Overview

• راه اندازی محیط کار Setting Up the Working Environment

• انیمیشن وب چیست؟ چرا متحرک سازی کنیم؟ What is Web Animation? Why to animate?

• ساخت اولین انیمیشن ما Creating Our First Animation

تبدیل می کند Transforms

• مقدمه ای بر تبدیل Introduction to Transforms

• حرکت عناصر با استفاده از تابع ترجمه Moving Elements using Translate Function

• تغییر اندازه عناصر با استفاده از تابع مقیاس Resizing Elements using Scale Function

• چرخش عناصر با استفاده از تابع چرخش Spinning Elements using Rotate Function

• کج کردن عناصر با استفاده از تابع Skew Tilting Elements using Skew Function

• عناصر قابل تبدیل Transformable Elements

• حرکت مبدأ عنصر Moving the Origin of the Element

• چند تبدیل در یک عنصر Multiple Transforms on One Element

پروژه: گالری تصاویر پولاروید Project: Polaroid Image Gallery

• ساخت کارت تصویر پولاروید Creating a Polaroid Image Card

• ایجاد گالری Creating the Gallery

• تصاویر پولاروید ما را با نوارهای چسبناک بچسبانید Paste Our Polaroid Images with Sticky Tapes

• لمس نهایی Final Touches

انتقال ها Transitions

• کنترل انتقال ما Controlling Our Transitions

• تعریف ویژگی برای اعمال انتقال Defining property to Apply the Transition

• تعیین مدت زمان انتقال Specifying How Long the Transition Will Take

• توابع زمان گذار قسمت 1 Transition Timing Functions Part 1

• توابع زمان گذار قسمت 2 Transition Timing Functions Part 2

• توابع زمان گذار قسمت 3 Transition Timing Functions Part 3

• تنظیم مهلت زمانی قبل از انتقال Setting Timeout Before the Transition

• جلسه آزمایشگاه: آوردن همه ویژگی های انتقال با هم Lab Session: Bringing All Transition Properties Together

• مختصات انتقالی Transition Shorthand Property

• استفاده از چندین انتقال در یک عنصر Using Multiple Transitions on An Element

• جلسه آزمایشگاه: انیمیشن Emoji موشک با چندین انتقال Lab Session: Rocket Emoji Animation with Multiple Transitions

• کدام ویژگی های CSS را می توان انتقال داد؟ Which CSS properties can be transitioned?

• جلسه آزمایشگاه: افزودن جلوه های انتقال به گالری تصاویر پولاروید ما Lab Session: Adding Transition Effects to Our Polaroid Image Gallery

پروژه: جلوه های لینک خلاق Project: Creative Link Effects

• رشد و مقیاس بندی جلوه های پایین Growing and Scaling Bottom Effects

• افکت های چپ به راست و از راست به چپ Left to Right and Right to Left Effects

• افکت مرکز به لبه ها Center to Edges Effect

• Edges to Center Effect Edges to Center Effect

• جلوه های بالا و پایین از چپ به راست و از راست به چپ Top and Bottom Left to Right and Right to Left Effects

• جلوه معکوس بالا و پایین Top and Bottom Reverse Effect

• جلوه متن را در جهت عمودی بکشید Swipe Text Effect in Vertical Direction

• جلوه متن را در جهت افقی بکشید Swipe Text Effect in Horizontal Direction

• از خطوط راست چپ تا جلوه بالا و پایین Left Right Lines to Top and Bottom Effect

پروژه: جلوه های دکمه سرد Project: Cool Button Effects

• اثر مقیاس - اندازه دکمه رشد و کوچک کردن Scale Effect - Grow and Shrink Button Size

• جلوه های چپ و راست پر را بکشید Swipe Fill Left and Right Effects

• جلوه های بالا و پایین پر را بکشید Swipe Fill Top and Bottom Effects

• اثر برش در جهت عمودی Slice Effect in Vertical Direction

• اثر برش در جهت افقی Slice Effect in Horizontal Direction

• گوشه های سمت چپ بالا و سمت راست به جلوه کامل حاشیه Left Top and Right Bottom Corners to Full Border Effect

• گوشه سمت راست بالا و سمت چپ پایین تا جلوه کامل حاشیه Right Top and Left Bottom Corners to Full Border Effect

• تعاملات میکرو - جلوه های نمادهای دکمه Micro Interactions - Button Icons Effects

• جلوه شناور پر کردن دایره Circle Fill Hover Effect

• جلوه شناور پر کردن دایره آگاه از موقعیت ماوس Mouse Position Aware Circle Fill Hover Effect

• دکمه های اجتماعی با جلوه های شناور Social Buttons with Hover Effects

پروژه: Image Hover Effects Project: Image Hover Effects

• زوم در اثر Zoom In Effect

• جلوه بزرگنمایی Zoom Out Effect

• اثر چرخش Rotate Effect

• جلوه های فیلتر - رنگ قهوه ای و مقیاس خاکستری Filter Effects - Sepia and Grayscale

• عنوان جلوه شناور Caption Hover Effect

انیمیشن های فریم کلیدی Keyframe Animations

• تصاوير متحرك Animations

• تعریف فریم های کلیدی Defining Keyframes

• جلسه آزمایشگاه: حرکت در اطراف جعبه Lab Session: Moving Around Box

• تعیین نام انیمیشن Specifying the Animation Name

• تعیین مدت زمان ماندگاری انیمیشن Defining How Long the Animation Lasts

• توابع زمان بندی انیمیشن Animation Timing Functions

• Lab Session: انیمیشن شیت Sprite با step() Lab Session: Sprite sheet animation with steps()

• تنظیم تایم اوت قبل از انیمیشن Setting Timeout Before the Animation

• تعریف چند بار اجرای انیمیشن Defining How Many Times the Animation Run

• تعیین جهت انیمیشن Specifying the Animation Direction

• تعریف سبک قبل و بعد از انیمیشن Defining Styles Before and After the animation

• مکث انیمیشن - کنترل وضعیت انیمیشن Pausing Animation - Controlling the Animation State

• ویژگی کوتاه نویسی انیمیشن - آوردن همه ویژگی های انیمیشن با هم Animation Shorthand Property - Bringing All Animation Properties Together

• چندین انیمیشن Keyframe روی Element Multiple Keyframe Animations on Element

پروژه: اسپینرها و پیش بارگزارهای CSS خالص Project: Pure CSS Spinners and Preloaders

• چرخش حاشیه دایره ای کلاسیک Classic Circular Border Spinner

• چرخش چرخشی در حال رشد Growing Circle Spinner

• چرخنده پالس سه نقطه Three Dots Pulse Spinner

• Heartbit Preloader Heartbit Preloader

• پیش بارگذاری مربع های چرخشی Rotating Squares Preloader

• Wave Preloader Wave Preloader

• مرکز رنگارنگ مربع پیش بارگزار Colorful Center Squares Preloader

• چرخنده مربع به دایره Square to Circle Rotating Spinner

• چرخش فلش ساعت Clock Arrow Spinner

پروژه: انیمیشن های زندگی واقعی Project: Real Life Animations

• جلوه تایپ CSS خالص Pure CSS Typing Effect

• پخش خودکار لغزنده تصویر خالص CSS Auto Play Pure CSS Image Slider

• روکش محو شدن با اسپینر Fading Overlay with Spinner

• نوار پیشرفت متحرک - نوار بارگیری Animated progress bar - Loading Bar

ابعاد جدید با تبدیل های سه بعدی New Dimension with 3D Transforms

• تبدیل سه بعدی چیست؟ What is 3D Transform?

• دریافت دیدگاه Getting the Perspective

• عملکرد Perspective Origin و Perspective() در مقابل ویژگی پرسپکتیو Perspective Origin and perspective() Function vs perspective Property

• ترجمه به صورت سه بعدی Translation in 3D

• مقیاس بندی به صورت سه بعدی Scaling in 3D

• چرخش به صورت سه بعدی Rotation in 3D

• تبدیل به سبک transform-style

• برخورد با صورت های پشتی Dealing with Back Faces

پروژه: چرخاندن کارت های محصول Project: Flipping Product Cards

• ایجاد دو طرف کارت Creating Two Sides of the Card

• دو طرف را با هم ترکیب کنید و کارت را برگردانید Combine Two Sides and Flipping the Card

• اضافه کردن کارت های بیشتر و مسیرهای بیشتر Adding More Cards and More Directions

پایان دوره End of the Course

• بعدش چی؟ What's next?