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

CSS3 Animations, Transforms and Transitions Ultimate Guide

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: افزایش تجربه کاربر، صفحات تعاملی، انیمیشن های سه بعدی، پروژه های واقعی و بهترین روش ها با انیمیشن های CSS3 تبدیل های دو بعدی و سه بعدی: ترجمه، مقیاس، چرخش و انحراف آوردن زنده و تعاملی به صفحه خود با انتقال اضافه کردن حرکت پیشرفته و پیچیده به صفحه شما صفحه با انیمیشن‌های فریم کلیدی کشف قدرت واقعی انیمیشن‌های CSS3 جابجایی‌ها و جلوه‌های شگفت‌انگیز CSS3 تبدیل‌های زیبای CSS با مثال‌ها و پروژه‌ای جامع پیشرفته‌ترین و مدرن‌ترین تکنیک‌های CSS3 استانداردها و بهترین شیوه‌های صنعت پیشرفته پروژه‌های تعاملی، جلسات آزمایشگاهی و همایش‌ها تجربه کاربری (UX) با انیمیشن های CSS پیش نیازها: درک پایه در HTML5 درک اولیه در CSS3 درک پایه در جاوا اسکریپت ویرایشگر متن برای توسعه مرورگر وب مدرن کنجکاوی برای یادگیری تکنیک های توسعه وب حرفه ای اشتیاق برای تبدیل شدن به یک توسعه دهنده حرفه ای

# جامع ترین دوره آموزشی انیمیشن های CSS در Udemy!

# جلسات آزمایشگاه و پروژه های زندگی واقعی

# زیرنویس انگلیسی (به طور خودکار ایجاد نمی شود)

# همه منابع و نمونه کد را می توان دانلود کرد

# نویسنده باتجربه و پاسخگو


CSS به یک زبان بسیار محبوب و ضروری برای توسعه دهندگان منفرد در پشته توسعه وب مدرن تبدیل شده است و این زبان با داشتن قابلیت های بیشتر به تکامل خود ادامه می دهد. امروزه، CSS می‌تواند اکثر نیازهای حرکت و انیمیشن را با استفاده از انتقال‌های CSS، تبدیل‌های CSS و انیمیشن‌های فریم کلیدی CSS برطرف کند.


در این دوره، ما تمام نکات کلیدی اضافه کردن حرکت به طراحی ها و صفحات وب شما را با هم پوشش خواهیم داد. این دوره به شما نشان می دهد که چگونه با تبدیل ها، انتقال ها و انیمیشن های فریم کلیدی در مرورگرهای مدرن کار کنید.


همه موضوعات توسط نمونه‌های جامع CSS3 Transform، Transition و Keyframe Animation پشتیبانی می‌شوند، پروژه‌ها و همچنین جلسات آزمایشگاهی برای پشتیبانی و تقویت منحنی یادگیری اضافه می‌شوند.


بنابراین برای تبدیل شدن به یک متخصص CSS و یک توسعه دهنده وب خوب، باید موضوعات اساسی را به وضوح درک کنید. مهمترین موضوعات انیمیشن های CSS در این دوره گنجانده شده است تا همه چیز در ذهن شما روشن شود.


موضوعات تحت پوشش این دوره عمدتاً عبارتند از:

  • تبدیل های CSS چیست و چگونه از آنها استفاده کنیم

  • درک تبدیل‌های دو بعدی: translate()، scale()، rotate() و skew()

  • جان بخشیدن به صفحه با انتقال

  • جلوه های انتقال ساده و پیشرفته

  • آنچه را می‌توانید تغییر دهید و نمی‌توانید تغییر دهید و متحرک کنید

  • درک نحو مختصر خصوصیات انتقال CSS

  • توابع زمان بندی انتقال CSS

  • نحوه متحرک سازی با CSS با استفاده از فریم های کلیدی

  • ویژگی های انیمیشن و جزئیات نحو

  • درک تبدیل های 3d: translate3d()، scale3d()، rotate3d() و skew3d()

  • دیدگاه


در پایان این دوره، درک بهتری از قابلیت ها و پتانسیل های CSS Transformations، Transitions و Animations به دست خواهید آورد.


فراموش نکن! تعاملات کوچک تأثیرات بزرگ


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

معرفی 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?

نمایش نظرات

Udemy (یودمی)

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

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

آموزش راهنمای نهایی انیمیشن‌ها، تبدیل‌ها و انتقال‌ها در CSS3
جزییات دوره
7.5 hours
93
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
552
4.7 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Alperen Talaslıoğlu Alperen Talaslıoğlu

توسعه دهنده و مدرس حرفه ای Frontend