🎨 ساخت انیمیشن‌های CSS با پانداگراف
تنظیمات را انتخاب کنید، پیش‌نمایش را ببینید و کد را کپی کنید.
درباره ابزار ساخت انیمیشن‌های CSS پانداگراف
ابزار آنلاین و رایگان پانداگراف به شما امکان می‌دهد بدون نوشتن حتی یک خط کد،
انیمیشن‌های حرفه‌ای CSS بسازید. کافی است نوع انیمیشن، مدت زمان، تعداد تکرار و رنگ‌ها را
انتخاب کنید، نتیجه را به‌صورت زنده ببینید و کد @keyframes آماده را در پروژه
خود کپی کنید.
آموزش گام به گام استفاده از ابزار
- نام کلاس را وارد کنید — مثلاً
pg-animیاpg-blink. پیشوندpg-توصیه می‌شود تا با استایل قالب تداخل نکند. - نوع انیمیشن را انتخاب کنید — بیش از ۲۰ افکت آماده شامل چشمک، نبض، لرزش، چرخش، فلیپ و…
- تنظیمات زمان‌بندی — مدت، مکث ابتدا، تعداد تکرار و جهت حرکت را تنظیم کنید.
- پیش‌نمایش زنده — تغییرات بلافاصله روی جعبه پیش‌نمایش اعمال می‌شود.
- کپی کد — روی دکمه «کپی کد» کلیک کنید و CSS را در فایل استایل پروژه خود پیست کنید.
- اعمال کلاس — کلاس ساخته‌شده را در تب Advanced → CSS Classes هر ویجت المنتور یا به‌صورت دستی به عنصر HTML اضافه کنید.
انیمیشن CSS چیست و چه کاربردهایی دارد؟
انیمیشن CSS یک تکنیک در طراحی وب است که به عناصر HTML اجازه می‌دهد بدون نیاز به جاوااسکریپت،
حرکت و تغییر داشته باشند. این انیمیشن‌ها با @keyframes و ویژگی animation ساخته می‌شوند.
✨ جلب توجه کاربر
چشمک‌زدن دکمه‌ها یا نمایش‌های ویژه با انیمیشن، نرخ کلیک را افزایش می‌دهد.
📥 ورود عناصر
افکت‌های slide و fade برای ورود نرم محتوا هنگام اسکرول یا بارگذاری.
⏳ نشانگر بارگذاری
چرخش یا نبض برای نمایش وضعیت Loading و انتظار کاربر.
🎯 بازخورد تعاملی
لرزش هنگام خطا، پرش هنگام موفقیت یا درخشش هنگام هاور.
خواص مهم انیمیشن در CSS
| ویژگی | توضیح |
|---|---|
| animation-name | نام انیمیشن که به @keyframes متصل می‌شود |
| animation-duration | مدت زمان هر چرخه اجرا (ثانیه) |
| animation-timing-function | شیب حرکت مانند ease یا cubic-bezier |
| animation-delay | مکث قبل از شروع انیمیشن |
| animation-iteration-count | تعداد تکرار (infinite برای بی‌نهایت) |
| animation-direction | جهت اجرا (normal، reverse، alternate) |
| animation-fill-mode | حالت عنصر قبل و بعد از انیمیشن |
سوالات متداول
آیا ابزار ساخت انیمیشن CSS پانداگراف رایگان است؟
بله، این ابزار کاملاً رایگان است و بدون نیاز به ثبت‌نام می‌توانید انیمیشن بسازید و کد آن را کپی کنید.
آیا کد تولیدشده در همه مرورگرها کار می‌کند؟
بله، کدهای تولیدشده از استاندارد W3C پیروی می‌کنند و در تمام مرورگرهای مدرن اجرا می‌شوند.
تفاوت transition و animation در CSS چیست؟
transition فقط بین دو حالت تغییر ایجاد می‌کند و نیاز به تریگر دارد؛ اما animation با @keyframes چند مرحله دارد و به‌صورت خودکار اجرا می‌شود.
آیا برای استفاده از این ابزار نیاز به دانش برنامه‌نویسی دارم؟
خیر، فقط با انتخاب گزینه‌ها از منوهای ابزار می‌توانید انیمیشن بسازید.
آیا می‌توانم کد تولیدشده را در پروژه تجاری استفاده کنم؟
بله، تمام کدهای تولیدشده آزاد هستند و می‌توانید در هر پروژه شخصی یا تجاری استفاده کنید.