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

CSS: Animation

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: انیمیشن CSS یک روش کاملاً جدید برای حرکت به پروژه های تعاملی ارائه می دهد. این یک مهارت اصلی برای طراحان و توسعه دهندگان وب است و ویژگی ای که کاربران از وب سایت های مدرن انتظار دارند. این دوره مجموعه ای از پروژه های اصلی انیمیشن CSS را ارائه می دهد: ویژگی های سایت مانند دکمه های چرخش ، تبدیل 3D ، گرافیک و آرم متحرک ، صفحه های بارگذاری و موارد دیگر.

طراح وب Val Head معرفی و تبدیل CSS - پایه و اساس اکثر انیمیشن های CSS - را نشان می دهد و نحوه چیدمان کلیدهای متحرک ساده و تنظیم زمان ، پر کردن و جهت آنها را نشان می دهد. وی همچنین شامل انیمیشن های حلقه ای و زنجیره ای ، متحرک سازی عناصر HTML و SVG و بهینه سازی عملکرد انیمیشن است و بهترین ابزارها و موارد استفاده را برای انیمیشن CSS معرفی می کند. شروع به تماشا کنید تا نام تجاری شما به حرکت درآید.
موضوعات شامل:
  • استفاده از CSS تبدیل و انتقال
  • کار با حالت انیمیشن-تاخیر و انیمیشن-پر کردن
  • زمان بندی و تسهیل انیمیشن های CSS
  • عناصر متحرک در محل
  • متحرک سازی تصاویر روح
  • متحرک سازی CSS و تبدیل ها
  • ایجاد زنجیر در چندین انیمیشن
  • متحرک سازی تصاویر SVG
  • ایجاد انیمیشن های 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

نمایش نظرات

Linkedin (لینکدین)

لینکدین: شبکه اجتماعی حرفه‌ای برای ارتباط و کارآفرینی

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

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

آموزش CSS: انیمیشن
جزییات دوره
1h 59m
33
Linkedin (لینکدین) Linkedin (لینکدین)
(آخرین آپدیت)
199,829
- از 5
ندارد
دارد
دارد
Val Head
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Val Head Val Head

طراح وب ، مشاور وال هد طراح و مشاور وب است که کارگاه های طراحی وب و کد نویسی خلاق را رهبری می کند. او با آژانس ها و مشاغل کوچک همکاری می کند تا وب سایت های م funثر و م makeثری بسازد. او در کنفرانس ها به صورت بین المللی صحبت می کند و کارگاه های آموزشی در زمینه طراحی وب و کد نویسی خلاق را رهبری می کند. بسیار توییت بسیار زیاد ، گهگاه دریبل ، و وبلاگها تا حدودی ناسازگار است.