افزودن به Chrome
← بازگشت به ویژگی‌ها
Pro

بازرس انیمیشن

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

افزودن به Chrome افزودن به Edge افزودن به FireFox

انیمیشن‌های CSS می‌توانند اشکال‌زدایی بسیار دشواری داشته باشند. سریع اتفاق می‌افتند، روی هم قرار می‌گیرند و DevTools مرورگر شما را مجبور می‌کند بین استایل‌های محاسبه‌شده بگردید تا خصوصیات انیمیشن را پیدا کنید. بازرس انیمیشن این مشکل را با شناسایی خودکار هر انیمیشن @keyframes و CSS transition در صفحه حل می‌کند، آن‌ها را با پیکربندی کامل (مدت زمان، easing، تأخیر، تعداد تکرار) فهرست می‌کند و کنترل‌های پخش برای کل صفحه یا هر انیمیشن به تنهایی ارائه می‌دهد.

پیش‌نمایش زنده
example.com/animated-landing Animation Inspector: ON
▶
⏸
0.25x 0.5x 1x 2x 4x
4 detected
Animations on page
  • fadeInUp
    .hero-title · @keyframes
    0.6s ease-out
    delay: 0s · 1 iteration
    running
  • slideIn
    .sidebar-nav · @keyframes
    0.4s ease
    delay: 0.2s · 1 iteration
    running
  • pulse
    .notification-badge · @keyframes
    2s ease-in-out
    delay: 0s · infinite
    paused
  • background-color
    .cta-button · transition
    0.2s ease
    transition property
    active
Timeline — fadeInUp 0.24s / 0.60s
0.0s 0.15s 0.30s 0.45s 0.60s
Animation Details
fadeInUp on .hero-title
@keyframes
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
Properties
duration0.6s
easingease-out
delay0s
iterations1
directionnormal
fill-modeforwards
Current State (40%)
opacity0.4
translateY12px
ویژگی‌های کلیدی

توقف / پخش همه انیمیشن‌ها

با یک کلیک تمام انیمیشن‌های صفحه را فوری متوقف کنید. همه انیمیشن‌ها در موقعیت فعلی متوقف می‌شوند — نه از ابتدا. برای ادامه از همان نقطه‌ای که متوقف شدند پخش را کلیک کنید.

کنترل سرعت متغیر

سرعت پخش همه انیمیشن‌ها را همزمان تنظیم کنید. از 0.25x (ربع سرعت)، 0.5x، 1x (معمولی)، 2x یا 4x انتخاب کنید. اجرا در 0.25x حتی سریع‌ترین transition های 200ms را قابل مشاهده و اشکال‌زدایی می‌کند.

فهرست کامل انیمیشن‌ها

هر انیمیشن CSS و transition در صفحه به‌طور خودکار شناسایی و در فهرستی قابل اسکرول نمایش داده می‌شود. هر آیتم نام انیمیشن، مدت زمان، تابع زمان‌بندی، تأخیر، تعداد تکرار و وضعیت فعلی را نشان می‌دهد.

حرکت در خط زمانی

اسکرابر خط زمانی را بکشید تا به‌صورت دستی فریم به فریم در انیمیشن حرکت کنید. ببینید دقیقاً در 25٪، 50٪ یا هر نقطه‌ای از چرخه انیمیشن چه اتفاقی می‌افتد.

کنترل جداگانه هر انیمیشن

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

جزئیات خصوصیات انیمیشن

روی هر انیمیشن در فهرست کلیک کنید تا اعلان CSS کامل آن را ببینید — تعریف @keyframes، خلاصه انیمیشن، حالت‌های شروع و پایان محاسبه‌شده، و عناصری که روی آن‌ها اعمال شده.

آنچه می‌توانید بررسی کنید

بازرس انیمیشن covers the following, organized by category:

خصوصیات انیمیشن

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

خصوصیات Transition

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

توابع زمان‌بندی

  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • linear
  • cubic-bezier()
  • steps()

خصوصیات Transform

  • transform
  • transform-origin
  • translate
  • rotate
  • scale
  • skew
موارد استفاده رایج

اشکال‌زدایی انیمیشن‌های لرزان

انیمیشن را به 0.25x کند کنید تا دقیقاً مشخص کنید کجای آن مشکل دارد. بررسی کنید که آیا مشکل از layout thrashing، easing نادرست یا انیمیشن‌های متضاد است.

تنظیم دقیق زمان‌بندی و منحنی‌های Easing

از حرکت در خط زمانی استفاده کنید تا ببینید منحنی cubic-bezier شما در عمل چگونه به نظر می‌رسد. رفتار ease-in در مقابل ease-out را در درصدهای مشخص مقایسه کنید.

درک کتابخانه‌های انیمیشن

از وب‌سایتی با انیمیشن‌های چشمگیر بازدید کنید و دقیقاً ببینید چگونه ساخته شده‌اند. تعاریف @keyframes، مقادیر زمان‌بندی و انتخاب عناصر را مشاهده کنید.

آزمایش QA تعاملات انیمیتد

تأیید کنید که hover effects، اسپینرهای بارگذاری، skeleton screens و page transitions همه به‌درستی رفتار می‌کنند. در حالت‌های میانی متوقف شوید تا اشکالات بصری را بررسی کنید.

بررسی دسترس‌پذیری حرکت

انیمیشن‌هایی را که ممکن است برای کاربران مبتلا به اختلالات دهلیزی مشکل‌ساز باشند شناسایی کنید. بررسی کنید آیا prefers-reduced-motion به‌درستی رعایت می‌شود.

نحوه استفاده
1

فعال‌سازی بازرس انیمیشن

داک شناور DevSuite Pro را باز کنید و روی آیکون بازرس انیمیشن کلیک کنید. ابزار فوراً صفحه را اسکن کرده و تمام انیمیشن‌ها و transitionهای CSS در حال اجرا را شناسایی می‌کند.

2

بررسی انیمیشن‌های شناسایی‌شده

یک پانل شناور ظاهر می‌شود که هر انیمیشن یافته‌شده در صفحه را فهرست می‌کند. هر آیتم نام انیمیشن، مدت زمان، تابع easing و وضعیت فعلی را نشان می‌دهد.

3

توقف و بازرسی

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

4

تنظیم سرعت

از انتخاب‌گر سرعت استفاده کنید تا انیمیشن‌ها را برای مشاهده دقیق‌تر به 0.25x کند کنید، یا برای چرخش سریع انیمیشن‌های طولانی به 4x سریع‌تر کنید.

5

حرکت در خط زمانی

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

آماده برای امتحان کردن هستید؟ بازرس انیمیشن?

DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.

افزودن به Chrome افزودن به Edge افزودن به FireFox