ساخت انیمیشن CSS

انیمیشن‌های fade، slide، bounce، rotate، pulse، shake، flip و zoom بسازید و کد keyframes آن را کپی کنید.

نوع انیمیشن

مدت زمان: 1.5s

تأخیر: 0s

تعداد تکرار

جهت (Direction)

Easing

کد CSS

@keyframes motmaen-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-24px); }
}

.element {
  animation: motmaen-bounce 1.5s ease 0s infinite normal both;
}

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

یکی از انیمیشن‌های آماده مثل fade، slide، bounce، rotate، pulse یا shake را انتخاب و تنظیم کنید تا پیش‌نمایش ببینید و کد keyframes را کپی کنید.

انیمیشن‌های ظریف توجه کاربر را به عناصر مهم جلب می‌کنند و تجربه‌ی رابط کاربری را زنده‌تر و مدرن‌تر می‌کنند.

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

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

keyframes در CSS چیست؟

keyframes مجموعه‌ای از حالت‌های میانی یک انیمیشن است که تعیین می‌کند عنصر در طول زمان چه تغییری کند.

آیا انیمیشن زیاد به سایت آسیب می‌زند؟

استفاده‌ی بیش از حد از انیمیشن می‌تواند حواس کاربر را پرت کند و در برخی دستگاه‌ها روی عملکرد اثر بگذارد؛ بهتر است ظریف و هدفمند باشد.

انیمیشن روی موبایل هم کار می‌کند؟

بله، انیمیشن‌های CSS در مرورگرهای موبایل هم پشتیبانی می‌شوند.

ابزارهای مرتبط

ساخت گرادیان CSSگرادیان خطی یا شعاعی با چند رنگ بسازید و کد CSS آن را کپی کنید.

ساخت سایه CSSبا اسلایدر آفست، بلور، گسترش و رنگ، سایه‌ی دلخواه بسازید و کد CSS آن را کپی کنید.

ساخت افکت شیشه‌ای CSSافکت Glassmorphism (شیشه‌ای مات) با کنترل بلور، شفافیت و حاشیه بسازید.

انتخاب و تبدیل رنگیک ابزار کامل رنگ در چند بخش: انتخاب رنگ و گرفتن کد HEX/RGB/HSL/RGBA، تبدیل بین فرمت‌های رنگ (HEX، RGB، HSL، HSV، CMYK و نام CSS)، و برداشتن رنگ از روی هر پیکسل یک تصویر.

ساخت پالت رنگیاز یک رنگ پایه، پالت‌های مکمل، مشابه، سه‌تایی، چهارتایی و تک‌رنگ بسازید و به‌صورت CSS خروجی بگیرید.

بررسی کنتراست رنگنسبت کنتراست دو رنگ را بر اساس استاندارد WCAG بسنجید و نتیجه‌ی AA/AAA را ببینید.