ساخت افکت لرزش دکمه با CSS — راهنمای جامع

افکت لرزش (shake) یکی از میکرواکنش‌های متداول در طراحی رابط کاربری است که برای جلب توجه کاربر، نشان دادن خطا یا تزئین تعاملات کوتاه استفاده می‌شود. در این مقاله به روش‌های پیاده‌سازی لرزش دکمه با CSS می‌پردازیم، نکات عملکردی و دسترس‌پذیری را بررسی می‌کنیم و چند مثال عملی و قابل سفارشی‌سازی ارائه می‌دهیم.

چرا از CSS برای لرزان‌سازی استفاده کنیم؟

• عملکرد بالاتر: استفاده از transform و opacity هستهٔ GPU را فعال می‌کند و نرخ فریم بهتری می‌دهد.
• سادگی و نگهداری: با CSS می‌توانید اثر را بدون اسکریپت پیچیده ایجاد کنید.
• قابلیت سفارشی‌سازی: مدت، دامنه و نوع easing به‌راحتی قابل تغییر است.

اصلی‌ترین روش: keyframes و transform

/* Basic shake animation */.button {
  display: inline-block;
  padding: 0.6rem 1rem;
  border: none;
  background: #0b79d0;
  color: white;
  cursor: pointer;
  border-radius: 6px;
  transition: transform 150ms ease;
  will-change: transform;
}

@keyframes shake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-8px); }
  30%  { transform: translateX(8px); }
  45%  { transform: translateX(-6px); }
  60%  { transform: translateX(6px); }
  75%  { transform: translateX(-3px); }
  90%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* Apply shake */.button.shake {
  animation: shake 600ms cubic-bezier(.36,.07,.19,.97);
}

این قطعه CSS یک افکت لرزش پایه تعریف می‌کند. keyframes با استفاده از translateX دکمه را در راستای افقی حرکت می‌دهد. کلاس .shake با animation فعال می‌شود، و will-change به مرورگر اطلاع می‌دهد که transform ممکن است تغییر کند تا رندر بهتر شود.

استفاده عملی: HTML و فعال‌سازی با کلیک

<button class="button" id="btn">ارسال</button>

<script>
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  btn.classList.remove('shake');        // reset if already shaked
  void btn.offsetWidth;                 // force reflow to restart animation
  btn.classList.add('shake');
});
</script>

در این مثال جاوااسکریپت تنها برای تحریک مجدد انیمیشن استفاده شده است. حذف و اضافه کردن کلاس همراه با دریافت offsetWidth باعث می‌شود animation از ابتدا اجرا شود. این روش سبک است و کنترل دقیق‌تری می‌دهد.

بهینه‌سازی و سفارشی‌سازی با CSS Variables

:root {
  --shake-duration: 550ms;
  --shake-distance: 8px;
  --shake-ease: cubic-bezier(.36,.07,.19,.97);
}

@keyframes shake-var {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(calc(var(--shake-distance) * -1)); }
  30%  { transform: translateX(var(--shake-distance)); }
  45%  { transform: translateX(calc(var(--shake-distance) * -0.75)); }
  60%  { transform: translateX(calc(var(--shake-distance) * 0.75)); }
  75%  { transform: translateX(calc(var(--shake-distance) * -0.4)); }
  90%  { transform: translateX(calc(var(--shake-distance) * 0.4)); }
  100% { transform: translateX(0); }
}

.button.shake {
  animation: shake-var var(--shake-duration) var(--shake-ease);
}

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

پیشگیری از مشکلات حرکت و دسترس‌پذیری

• پشتیبانی از prefers-reduced-motion: به کاربرانی که از انیمیشن حساس‌اند احترام بگذارید.
• از transform به جای تغییر موقعیت layout (مثل top/left) استفاده کنید تا عملکرد بهتر باشد.
• مطمئن شوید لرزش باعث ایجاد مشکل خوانایی یا تهوع نشود؛ طول و دامنه را محدود کنید.

@media (prefers-reduced-motion: reduce) {
  .button.shake {
    animation: none;
    transform: translateX(0);
  }
}

این قطعه از media query سیستم عامل/مرورگر برای خاموش کردن انیمیشن برای کاربرانی که ترجیح به کاهش حرکت دارند استفاده می‌کند.

روش‌های جایگزین و نکات فنی

نمونه پیشرفته: لرزش همراه با سایه برای عمق

.button.shake-shadow {
  animation: shake-var var(--shake-duration) var(--shake-ease);
  box-shadow: 0 6px 18px rgba(11,121,208,0.18);
}

/* اضافه کردن اندکی چرخش برای حس طبیعی‌تر */@keyframes shake-rotate {
  0%   { transform: translateX(0) rotate(0deg); }
  20%  { transform: translateX(-6px) rotate(-3deg); }
  40%  { transform: translateX(6px) rotate(3deg); }
  60%  { transform: translateX(-4px) rotate(-2deg); }
  80%  { transform: translateX(4px) rotate(2deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

افزودن چرخش جزئی و سایه می‌تواند لرزش را طبیعی‌تر نشان دهد؛ با این حال باید محتاط باشید که افکت زیاد نشود. همیشه روی دستگاه‌های موبایل تست کنید.

موارد استفاده پیشنهادی

• هشدار خطا در فرم‌ها (مثلاً فیلد اشتباه): لرزش کوتاه توجه کاربر را جلب می‌کند.
• تأیید شکست تعامل: وقتی عملی ناموفق است، می‌توانید بازخورد فوری بدهید.
• افزودن پویایی به دکمه‌های مهم در آپلیکیشن‌ها و بازی‌ها.

نتیجه‌گیری و بهترین شیوه‌ها

لرزش دکمه با CSS یک ابزار ساده ولی مؤثر است که اگر صحیح و مسئولانه استفاده شود، تجربهٔ کاربری را بهبود می‌بخشد. نکات کلیدی:

• همیشه از transform استفاده کنید تا عملکرد خوب بماند.
• برای کاربران حساس به حرکت از prefers-reduced-motion پیروی کنید.
• دامنه و مدت انیمیشن را منطقی و کوتاه نگه دارید.
• برای حالت‌های مختلف، از متغیرهای CSS یا کلاس‌های جداگانه استفاده کنید.

با رعایت این نکات می‌توانید افکت لرزش زیبا، سبک و قابل کنترل بسازید که هم جذاب باشد و هم دسترس‌پذیر.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال