অ্যানিমেশন ইনস্পেক্টর আপনাকে যে কোনো ওয়েবপেজে চলমান প্রতিটি CSS অ্যানিমেশন এবং ট্রানজিশনের ওপর সম্পূর্ণ নিয়ন্ত্রণ দেয়। সব অ্যানিমেশন একসাথে পজ করুন, ফ্রেম-বাই-ফ্রেম ইনস্পেকশনের জন্য সেগুলোকে স্লো করুন, পারফরম্যান্স টেস্ট করার জন্য গতি বাড়ান, অথবা টাইমলাইনের মাধ্যমে ম্যানুয়ালি স্ক্রাব করুন — এই সবই ব্রাউজার ডেভ-টুল ব্যবহার না করে একটি একক ফ্লোটিং প্যানেল থেকে।
CSS অ্যানিমেশন ডিবাগ করা কুখ্যাতভাবে কঠিন হতে পারে। এগুলো দ্রুত ঘটে, একে অপরের ওপর চলে এবং ব্রাউজার ডেভ-টুল আপনাকে অ্যানিমেশন প্রপার্টিগুলো খুঁজে পেতে কম্পিউটেড স্টাইলগুলোর মধ্যে খুঁজতে বাধ্য করে। অ্যানিমেশন ইনস্পেক্টর পেজের প্রতিটি @keyframes অ্যানিমেশন এবং CSS ট্রানজিশন স্বয়ংক্রিয়ভাবে ডিটেক্ট করে, সেগুলোকে তাদের সম্পূর্ণ কনফিগারেশন (সময়কাল, ইসিং, ডিলে, ইটারেশন কাউন্ট) সহ তালিকাভুক্ত করে এবং আপনাকে প্লেব্যাক কন্ট্রোল দেয় যা ক্লিক করলে গ্লোবাল বা প্রতি-অ্যানিমেশনে কাজ করে। আপনি কোনো জিটারি হোভার ইফেক্ট ডিবাগ করছেন, পেজ এন্ট্র্যান্স সিকোয়েন্সের টাইমিং ঠিক করছেন বা কোনো জটিল অ্যানিমেশন লাইব্রেরি কীভাবে কাজ করে তা বোঝার চেষ্টা করছেন — এই টুলটি আপনাকে নিয়ন্ত্রণে রাখে।
এক ক্লিকে পেজের প্রতিটি অ্যানিমেশন তাৎক্ষণিকভাবে ফ্রিজ করুন। সব অ্যানিমেশন তাদের বর্তমান অবস্থানে থেমে যায় — শুরু থেকে রিসেট হয় না। যেখান থেকে থেমেছিল ঠিক সেখান থেকেই শুরু করতে প্লে বাটনে ক্লিক করুন। অ্যানিমেশনের মাঝামাঝি অবস্থাগুলো ইনস্পেক্ট করার জন্য এটি অপরিহার্য যা খালি চোখে ধরা অসম্ভব।
একই সাথে সব অ্যানিমেশনের প্লেব্যাক স্পিড সামঞ্জস্য করুন। ০.২৫x (এক-চতুর্থাংশ গতি), ০.৫x, ১x (স্বাভাবিক), ২x বা ৪x থেকে বেছে নিন। ০.২৫x এ চালানোর ফলে এমনকি দ্রুত ২০০ms ট্রানজিশনগুলোও সহজে পর্যবেক্ষণ এবং ডিবাগ করা যায়।
পেজের প্রতিটি CSS অ্যানিমেশন এবং ট্রানজিশন স্বয়ংক্রিয়ভাবে সনাক্ত করা হয় এবং একটি স্ক্রোলযোগ্য তালিকায় প্রদর্শিত হয়। প্রতিটি এন্ট্রিতে অ্যানিমেশনের নাম (বা ট্রানজিশন প্রপার্টি), সময়কাল, টাইমিং ফাংশন (ease, linear, cubic-bezier), ডিলে, ইটারেশন কাউন্ট এবং বর্তমান রানিং স্টেট দেখানো হয়।
ম্যানুয়ালি একটি অ্যানিমেশন ফ্রেম বাই ফ্রেম দেখার জন্য টাইমলাইন স্ক্র্যাবারটি ড্র্যাগ করুন। অ্যানিমেশন সাইকেলের ২৫%, ৫০% বা যেকোনো পয়েন্টে ঠিক কী ঘটছে তা দেখুন। আপনি ড্র্যাগ করার সাথে সাথে পেজটি রিয়েল-টাইমে আপডেট হয়।
ব্যক্তিগত অ্যানিমেশনগুলোর জন্য আলাদাভাবে পজ, প্লে বা গতি সমন্বয় করুন। পেজের অন্যান্য চলন্ত এলিমেন্ট দ্বারা বিভ্রান্ত না হয়ে একটি একক অ্যানিমেশন ডিবাগ করার জন্য সেটিকে আলাদা করুন।
তালিকার যেকোনো অ্যানিমেশনে ক্লিক করে তার সম্পূর্ণ CSS ডিক্ল্যারেশন দেখুন — @keyframes ডেফিনিশন, অ্যানিমেশন শর্টহ্যান্ড ব্রেকডাউন, কম্পিউটেড স্টার্ট এবং এন্ড স্টেট এবং এটি কোন এলিমেন্টগুলোতে অ্যাপ্লাই করা হয়েছে।
অ্যানিমেশন ইনস্পেক্টর covers the following, organized by category:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-statetransition-propertytransition-durationtransition-timing-functiontransition-delayeaseease-inease-outease-in-outlinearcubic-bezier()steps()transformtransform-origintranslaterotatescaleskewঠিক কোথায় তোতলামি বা জান্ক (jank) ঘটছে তা শনাক্ত করতে একটি অ্যানিমেশনকে ০.২৫x এ স্লো করুন। সমস্যাটি লেআউট থ্র্যাশিং (ট্রান্সফর্মের পরিবর্তে উইডথ/হایت অ্যানিমেশন করা), ভুল ইসিং বা একই এলিমেন্টে পরস্পরবিরোধী অ্যানিমেশনের কারণে হচ্ছে কিনা তা পরীক্ষা করুন।
আপনার cubic-bezier ইসিং কার্ভটি বাস্তবে কেমন দেখায় তা দেখতে টাইমলাইন স্ক্রাবিং ব্যবহার করুন। নির্দিষ্ট শতাংশে ease-in বনাম ease-out আচরণ তুলনা করুন। মানগুলো অ্যাডজাস্ট করুন এবং মোশন ঠিক না হওয়া পর্যন্ত রিপ্লে করুন।
চমৎকার অ্যানিমেশন সহ একটি ওয়েবসাইট ভিজিট করুন (ল্যান্ডিং পেজ, পোর্টফোলিও সাইট) এবং সেগুলো ঠিক কীভাবে তৈরি করা হয়েছে তা ইনস্পেক্ট করুন। @keyframes ডেফিনিশন, টাইমিং ভ্যালু এবং এলিমেন্ট টার্গেটিং দেখুন যা জটিল সিকোয়েন্সগুলো সফলভাবে চালায়।
হোভার ইফেক্ট, লোডিং স্পিনার, স্কেলিটন স্ক্রিন এবং পেজ ট্রানজিশনগুলো সঠিকভাবে কাজ করছে কিনা তা যাচাই করুন। এলিমেন্ট ওভারল্যাপিং, অ্যানিমেশনের সময় ভুল z-index বা কন্টেন্ট রিফ্লোর মতো ভিজ্যুয়াল গ্লিচগুলো চেক করতে মিড-স্টেটে পজ করুন।
ভেস্টিবুলার ডিসঅর্ডার আছে এমন ব্যবহারকারীদের জন্য সমস্যা তৈরি করতে পারে এমন অ্যানিমেশনগুলো শনাক্ত করুন। সব অ্যানিমেশন পজ করে এবং পেজটি পুরোপুরি কার্যকর থাকছে কিনা তা দেখে 'prefers-reduced-motion' সঠিকভাবে মানা হচ্ছে কিনা তা পরীক্ষা করুন।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং অ্যানিমেশন ইনস্পেক্টর আইকনে ক্লিক করুন। টুলটি অবিলম্বে পেজ স্ক্যান করে এবং সব রানিং CSS অ্যানিমেশন ও ট্রানজিশন ডিটেক্ট করে।
পেজে পাওয়া প্রতিটি অ্যানিমেশনের তালিকা সহ একটি ফ্লোটিং প্যানেল প্রদর্শিত হয়। প্রতিটি এন্ট্রিতে অ্যানিমেশনের নাম, সময়কাল, ইসিং ফাংশন এবং এটি বর্তমানে চলছে নাকি পজ করা আছে তা দেখা যায়। কাউন্ট ব্যাজটি শনাক্ত করা অ্যানিমেশনের মোট সংখ্যা দেখায়।
একই সাথে সব অ্যানিমেশন ফ্রিজ করতে গ্লোবাল পজ বাটনে ক্লিক করুন। এলিমেন্টগুলো তাদের বর্তমান মিড-অ্যানিমেশন স্টেটে থাকে, যা আপনাকে CSS প্রপার্টি ইনস্পেক্ট করতে, স্ক্রিনশট নিতে বা পজিশন তুলনা করতে দেয়।
বিস্তারিত পর্যবেক্ষণের জন্য অ্যানিমেশনগুলোকে ০.২৫x এ স্লো করতে অথবা দীর্ঘ অ্যানিমেশনগুলো দ্রুত শেষ করতে ৪x এ স্পিড সিলেক্টর ব্যবহার করুন। স্পিড পরিবর্তনগুলো রিস্টার্ট ছাড়াই তাৎক্ষণিকভাবে কার্যকর হয়।
ম্যানুয়ালি অ্যানিমেশনের ধাপগুলো দেখার জন্য টাইমলাইন স্ক্র্যাবারটি বাম ও ডানে ড্র্যাগ করুন। পেজটি রিয়েল-টাইমে আপডেট হয়, যা আপনাকে প্রতিটি ফ্রেম দেখতে সাহায্য করে। গ্লিচ শনাক্ত করতে বা ইসিং কার্ভ যাচাই করার জন্য এটি নিখুঁত।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।