انیمیشن ها را با برگه کشوی Chrome DevTools Animations بررسی و اصلاح کنید.
بررسی اجمالی
برای گرفتن انیمیشن، تب Animations را باز کنید. به طور خودکار انیمیشن ها را شناسایی کرده و آنها را در گروه ها مرتب می کند.
تب Animations دو هدف اصلی دارد:
- انیمیشن ها را بررسی کنید کد منبع یک گروه انیمیشن را کم کنید، دوباره پخش کنید یا بررسی کنید.
- انیمیشن ها را اصلاح کنید . زمان، تأخیر، مدت زمان یا تغییر فریم کلیدی یک گروه انیمیشن را تغییر دهید. ویرایش Keyframe و Bezier پشتیبانی نمی‌شود.
تب Animations از انیمیشن‌های CSS، انتقال‌های CSS، انیمیشن‌های وب و View Transitions API پشتیبانی می‌کند. انیمیشن‌های requestAnimationFrame هنوز پشتیبانی نمی‌شوند.
گروه انیمیشن چیست؟
گروه انیمیشن مجموعه‌ای از انیمیشن‌هایی است که ظاهراً مرتبط با یکدیگر هستند.
در حال حاضر، وب هیچ مفهوم واقعی از یک انیمیشن گروهی ندارد، بنابراین طراحان و توسعه دهندگان حرکت، انیمیشن های فردی را می سازند و زمان بندی می کنند تا به عنوان یک جلوه بصری منسجم ظاهر شوند. برگه انیمیشن ها انیمیشن های مرتبط را بر اساس زمان شروع (به استثنای تاخیرها) پیش بینی می کند و آنها را در کنار هم گروه بندی می کند.
به عبارت دیگر، تب Animations انیمیشن‌هایی را که در یک بلوک اسکریپت راه‌اندازی شده‌اند را با هم گروه‌بندی می‌کند، اما اگر ناهمزمان باشند، در گروه‌های مختلف قرار می‌گیرند.
شروع کنید
دو راه برای باز کردن تب Animations وجود دارد:
- انتخاب کنید
DevTools > ابزارهای بیشتر > انیمیشن‌ها را سفارشی و کنترل کنید. 
منوی فرمان را با فشار دادن یکی از موارد زیر باز کنید:
- در macOS: Command + Shift + P
- در Windows، Linux، یا ChromeOS: Control + Shift + P
سپس شروع به تایپ
Show Animationsکنید و پنل کشوی مربوطه را انتخاب کنید.
به طور پیش فرض، تب Animations به عنوان یک برگه در کنار کشوی کنسول باز می شود. به عنوان یک برگه کشو، می‌توانید آن را با هر پانلی استفاده کنید یا آن را به بالای DevTools منتقل کنید .
برگه انیمیشن ها دارای چهار بخش اصلی است:
- کنترل ها از اینجا، می‌توانید پاک کردن همه گروه‌های انیمیشن گرفته‌شده را مسدود کنید ، انیمیشن‌های Pause یا play_arrow را متوقف کنید ، یا سرعت گروه انیمیشن انتخاب‌شده را تغییر دهید.
بررسی اجمالی . گروه‌های انیمیشن گرفته‌شده را از دو نوع نشان‌داده‌شده با نمادها نشان می‌دهد: پیمایش محور ماوس و برنامه منظم (بر اساس زمان).
یک گروه انیمیشن را در اینجا انتخاب کنید تا آن را در قسمت جزئیات بررسی و اصلاح کنید.
جدول زمانی بسته به نوع گروه انیمیشن، جدول زمانی می تواند به صورت زیر باشد:
- در پیکسل برای انیمیشن های اسکرول ماوس .
- در میلی ثانیه برای انیمیشن های مبتنی بر زمان.
در جدول زمانی، می‌توانید یک انیمیشن را دوباره پخش کنید ، آن را پاک کنید یا به نقطه‌ای خاص بپرید.
جزئیات . گروه انیمیشن انتخاب شده را بررسی و اصلاح کنید.
برای گرفتن یک انیمیشن، زمانی که برگه انیمیشن ها باز است، آن را فعال کنید. اگر یک انیمیشن در بارگذاری صفحه فعال شد، آن را دوباره بارگیری کنید.
انیمیشن ها را بررسی کنید
هنگامی که یک انیمیشن را ضبط کردید، چند راه برای پخش مجدد آن وجود دارد:
- ماوس را روی تصویر کوچک آن در قسمت نمای کلی نگه دارید تا پیش نمایشی از آن را مشاهده کنید.
- هد پخش (نوار عمودی قرمز) را بکشید تا پویانمایی درگاه نمایش را پاک کنید یا روی هر نقطه از جدول زمانی کلیک کنید تا هد پخش روی یک نقطه خاص تنظیم شود. اگر انیمیشن قبلا پخش شده بود به پخش ادامه می‌دهد و در غیر این صورت متوقف می‌شود.
- گروه انیمیشن را از قسمت نمای کلی انتخاب کنید (به طوری که در قسمت جزئیات نمایش داده شود) و دکمه
دکمه پخش مجدد انیمیشن دوباره در نمای نمایش پخش می شود.
کلیک کنید بر روی 
دکمه های سرعت انیمیشن در نوار کنترل ها برای تغییر سرعت پیش نمایش گروه انیمیشن انتخاب شده.
مشاهده جزئیات انیمیشن
هنگامی که یک گروه انیمیشن را گرفتید، از قسمت نمای کلی روی آن کلیک کنید تا جزئیات آن را مشاهده کنید.
در بخش جزئیات ، هر انیمیشن ردیف خاص خود را دریافت می کند. برای دیدن کل نام عنصر مربوطه، اندازه ستون نام را تغییر دهید.
ماوس را روی یک انیمیشن نگه دارید تا آن را در نمای دید برجسته کنید. روی انیمیشن کلیک کنید تا در پنل Elements انتخاب شود.
اگر خاصیت animation-iteration-count آنها روی infinite تنظیم شود، برخی از انیمیشن‌ها به‌طور نامحدود تکرار می‌شوند. تب Animations تعاریف و تکرار آنها را نمایش می دهد.
سمت چپ ترین و تاریک ترین بخش یک انیمیشن، تعریف آن است. بخش های سمت راست و کم رنگ تر نشان دهنده تکرار هستند.
به عنوان مثال، در اسکرین شات بعدی، بخش‌های دو و سه تکرارهای بخش یک را نشان می‌دهند.
اگر دو عنصر دارای انیمیشن یکسانی باشند، تب Animations به آنها یک رنگ اختصاص می‌دهد. رنگ به خودی خود تصادفی است و هیچ اهمیتی ندارد. به عنوان مثال، در تصویر زیر دو عنصر div.eye.left::after و div.eye.right::after همان انیمیشن ( eyes ) روی آنها اعمال می شود، مانند div.feet::before و div.feet::after element.
انیمیشن ها را اصلاح کنید
سه راه برای تغییر یک انیمیشن با تب انیمیشن ها وجود دارد:
- مدت زمان انیمیشن
- زمان بندی فریم های کلیدی
- تاخیر زمانی شروع
برای این بخش، فرض کنید که اسکرین شات بعدی نشان دهنده انیمیشن اصلی است:
برای تغییر مدت زمان یک انیمیشن، اولین یا آخرین دایره را بکشید.
اگر انیمیشن قوانین فریم کلیدی را تعریف کند، آنها به صورت دایره‌های داخلی سفید نشان داده می‌شوند. یکی از اینها را بکشید تا زمان بندی فریم کلیدی را تغییر دهید.
برای اضافه کردن تاخیر به یک انیمیشن، روی خود انیمیشن کلیک کنید، نه دایره ها، سپس آن را به هر جایی بکشید.
عناصر شبه ::view-transition در طول یک انیمیشن ویرایش کنید
با View Transitions API ، می‌توانید DOM را در یک مرحله تغییر دهید، در حالی که یک انتقال متحرک بین دو حالت ایجاد می‌کنید. در طول یک انیمیشن، API یک درخت شبه عنصر با ساختار زیر می سازد:
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)
برای ویرایش این ساختار در Elements > Styles :
- DevTools را باز کنید و صفحه‌ای را که از View Transitions API استفاده می‌کند، بررسی کنید. به عنوان مثال، این صفحه نمایشی .
- در انیمیشن ها ، روی مکث مکث کلیک کنید.
در صفحه، یک انیمیشن را فعال کنید. پانل انیمیشن ها آن را می گیرد و بلافاصله مکث می کند. اکنون می توانید ساختار
::view-transitionدر DOM، در بالای عنصر<head>پیدا کنید.
در Elements > Styles ، CSS شبه عناصر
::view-transitionرا تغییر دهید.انیمیشن را از سر بگیرید و آن را دوباره پخش کنید تا نتیجه را ببینید.
برای اطلاعات بیشتر، انتقال صاف و ساده با View Transitions API را ببینید.