نکات DevTools: نحوه بررسی و اصلاح انیمیشن های CSS

سوفیا املیانوا
Sofia Emelianova

تب انیمیشن‌های ابزار برنامه‌نویس Chrome ابزار قدرتمندی است که به شما کمک می‌کند سرعت را کاهش دهید، دوباره پخش کنید، زمان‌بندی انیمیشن‌های CSS را تنظیم کنید و نتایج را فورا ببینید.

در حالی که برگه انیمیشن ها باز است، انیمیشن ها را به صورت خودکار ضبط می کند، به راحتی آنها را گروه بندی می کند و به شما امکان می دهد:

  • انیمیشن ها را دوباره پخش کنید و سرعت آنها را کاهش دهید تا بهتر آنها را بررسی کنید.
  • به جای حدس زدن و تنظیم دستی مقادیر CSS، مدت‌ها، زمان‌بندی‌ها و تاخیرها را با کشیدن نقاط در یک جدول زمانی تنظیم کنید.

علاوه بر این، می‌توانید زمان‌بندی‌های کاهش را ویرایش کنید و مقادیر منحنی cubic-bezier سفارشی را با ویرایشگر آسان‌سازی در بخش Elements > Styles تنظیم کنید. برای کسب اطلاعات بیشتر، به ویرایش انیمیشن و زمان‌بندی انتقال با Easing Editor مراجعه کنید.

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