مولد انیمیشن کی‌فریم CSS

این مولد انیمیشن CSS چه کاری انجام می‌دهد

نوشتن یک @keyframes ساختن یک rule از صفر یعنی به‌خاطر سپردن نحو درصدها، انتخاب مقادیر transform که ظاهر نامرتبی ایجاد نکنند و سپس تنظیم پنج ویژگی جداگانهٔ انیمیشن فقط برای درست‌کردن زمان‌بندی. این ابزار آزمون‌وخطا را حذف می‌کند: یکی از ۱۵ حرکت رایج — محو‌شدن، لغزش از هر جهت، بزرگ‌نمایی، پرش، ضربان، لرزش، تاب‌خوردن، چرخش، برگردان یا نوسان — را انتخاب کنید، مدت‌زمان، تأخیر، easing، تعداد تکرار، جهت و حالت پرکردن را تنظیم کنید و پیش از آن‌که حتی به شیوه‌نامهٔ خود دست بزنید، اجرای آن را روی یک شکل در پیش‌نمایش زنده ببینید.

هر کنترل مستقیماً به یک ویژگی واقعی انیمیشن CSS مرتبط است؛ بنابراین چیزی که در کادر پیش‌نمایش می‌بینید، دقیقاً همان چیزی است که در محیط واقعی دریافت خواهید کرد: مدت‌زمان انیمیشن, تأخیر انیمیشن, animation-timing-function (از جمله تابع easing داخلی «back» با بیش‌جهش از طریق cubic-bezier), animation-iteration-count, جهت انیمیشن، و حالت پرکردن انیمیشن همه گزینه‌ها در دسترس هستند و پشت یک نوار لغزنده ساده‌شده «سرعت» پنهان نشده‌اند.

نحوه استفاده از آن

یک پیش‌تنظیم و شکل پیش‌نمایش را انتخاب کنید، سپس کنترل‌های زمان‌بندی زیر را تنظیم کنید — کادر پیش‌نمایش با هر تغییر به‌طور خودکار دوباره اجرا می‌شود، یا برای اجرای دستی روی «پخش دوباره» بزنید. وقتی نتیجه مناسب شد، بلوک CSS تولیدشده را کپی کنید: این بلوک شامل هر دو مورد زیر است @keyframes definition و a ready-to-use .animated-element کلاسی که می‌توانید نامش را تغییر دهید و روی هر چیزی در صفحه‌تان اعمال کنید.

یک مثال واقعی

فرض کنید در حال ساخت نشان «ویژگی جدید» هستید و می‌خواهید بدون آزاردهنده‌بودن، توجه‌ها را جلب کند — گزینهٔ Pulse را انتخاب کنید، مدت‌زمان را روی 1.5s، تعداد تکرار را روی infinite و easing را روی ease-in-out بگذارید. نتیجه، افکتی نرم و شبیه نفس‌کشیدن است، نه یک جهش ناگهانی و آزاردهنده. برای وضعیت خطای اعتبارسنجی فرم که باید فقط یک‌بار اجرا شود و متوقف شود، به‌جای آن به Shake بروید و تعداد تکرار را روی 1 بگذارید.

سؤالات متداول

آیا می‌توانم بیش از یک انیمیشن را روی یک عنصر اعمال کنم؟

بله — CSS از فهرست‌های انیمیشن جداشده با ویرگول پشتیبانی می‌کند (animation: anim1 1s, anim2 2s;را. هر انیمیشن را جداگانه در اینجا تولید کنید و اگر می‌خواهید دو حرکت را روی یک عنصر لایه‌گذاری کنید، مقادیر کوتاه‌شده را به‌صورت دستی ترکیب کنید.

چرا وقتی دو بار سریع روی «پخش دوباره» کلیک می‌کنم، انیمیشن دوباره شروع نمی‌شود؟

مرورگرها انیمیشن CSS در حال اجرا را دوباره شروع نمی‌کنند، مگر این‌که بین آن‌ها یک reflow رخ دهد — این ابزار در داخل خود reflow را اعمال می‌کند، بنابراین Replay همیشه کار می‌کند؛ اما اگر CSS تولیدشده را در منطق replay خود که با JS اجرا می‌شود کپی می‌کنید، به همان ترفند نیاز خواهید داشت (toggle animation: none، یک بار خواندن چیدمان را اجباری می‌کند و سپس آن را دوباره اعمال می‌کند).

تفاوت بین مقادیر animation-fill-mode چیست؟

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

آیا این انیمیشن‌ها روی مرورگرهای قدیمی‌تر کار می‌کنند؟

CSS @keyframes و the animation-* این ویژگی‌ها سال‌هاست بدون پیشوندهای فروشنده در همه مرورگرهای مدرن (Chrome، Firefox، Safari و Edge) پشتیبانی می‌شوند — برای پشتیبانی از مرورگرهای فعلی نیازی به افزودن پیشوند نیست.

آیا این کار روی عملکرد صفحه تأثیر می‌گذارد؟

همه پیش‌تنظیم‌های اینجا متحرک می‌شوند تبدیل و شفافیت، دو ویژگی‌ای که مرورگرها می‌توانند آن‌ها را روی کامپوزیتور GPU و بدون محاسبه مجدد چیدمان متحرک کنند — کم‌هزینه‌ترین روش ممکن برای متحرک‌سازی در وب.