component-animations

مشخصات کامل انیمیشن کامپوننت‌های UI با تعامل طبیعی و دسترس‌پذیری

این skill برای طراحی و پیاده‌سازی انیمیشن حالت‌های مختلف کامپوننت‌های UI مانند Button، Card، Modal، Toast، Input، Checkbox، Switch، Dropdown و Accordion استفاده می‌شود. برای هر حالت، transform، مدت‌زمان و easing مناسب را بر اساس اصول Disney و الگوهای Material Design ارائه می‌کند.

با استفاده از این راهنما، تعاملات رابط کاربری منسجم‌تر و قابل‌پیش‌بینی‌تر می‌شوند و برای prefers-reduced-motion نیز جایگزین‌های مناسب خواهید داشت. همچنین می‌توانید انیمیشن‌ها را با شخصیت برندهای Elegant، Playful یا Bold هماهنگ کنید.

چه چیزی می‌گیرید

جدول state transition، transform، duration و easing برای کامپوننت‌های رایج
الگوهای آماده برای hover، press، focus، loading، ورود، خروج و تغییر وضعیت
تنوع‌های حرکتی برای برندهای Elegant، Playful و Bold
راهنمای پیاده‌سازی reduced motion و حفظ نشانه‌های ضروری دسترس‌پذیری
الگوهای stagger، spring، bounce، shake و draw برای تعاملات دقیق‌تر

برای چه کاری خوب است

توسعه‌دهندگان Frontend که برای یک Design System انیمیشن تعریف می‌کنند
طراحان محصولی که می‌خواهند رفتار حرکتی کامپوننت‌ها را مستند و قابل‌اجرا کنند
پروژه‌هایی که به تعاملات منسجم، اصولی و سازگار با دسترس‌پذیری نیاز دارند

برای چه کاری نیست

ساخت موشن‌گرافیک، انیمیشن‌های سینمایی یا ویدیوهای مستقل
پروژه‌هایی که فقط به یک transition ساده CSS بدون طراحی stateها نیاز دارند

دربارهٔ این اسکیل

Component Animations

Complete animation specifications for every UI component state. Reference this skill when implementing component-level animations with proper Disney principles, brand variations, and accessibility.

Component Catalog

Button

Interaction States:

Idle -> Hover -> Press -> Release -> Idle
Idle -> Focus -> Press -> Release -> Blur -> Idle
Any -> Disabled
Any -> Loading

State	Transform	Duration	Easing
Hover	`translateY(-2px)`	`short-3`	`standard-decelerate`
Press	`scale(0.95)`	`short-2`	`emphasized-decelerate`
Focus	Focus ring pulse	1.5s	`ease-in-out`
Loading	Spinner rotation	0.8s	`linear`

Brand Variations:

Elegant: No squash, subtle scale (0.98)
Playful: Bounce with overshoot, scale 0.92 -> 1.05
Bold: Quick snap, scale 0.95 -> 1.02

Card

Interaction States:

Idle -> Hover -> Press -> Idle
Idle -> Selected
Idle -> Dragging -> Drop

State	Transform	Duration	Easing
Hover	`translateY(-4px)` + shadow	`short-3`	`standard-decelerate`
Press	`scale(0.98)`	`short-2`	`emphasized-decelerate`
Entrance	fade + slide	`medium-1`	`emphasized-decelerate`
Dragging	`scale(1.02) rotate(2deg)` + shadow	-	-

Modal

States:

Closed -> Opening -> Open -> Closing -> Closed

State	Properties	Duration	Easing
Backdrop Open	opacity + blur	`medium-1`	`standard`
Content Open	opacity + scale + translateY	`medium-1`	`emphasized-decelerate`
Content Close	opacity + scale	`short-4`	`emphasized-accelerate`

Toast / Notification

States:

Hidden -> Entering -> Visible -> Exiting -> Hidden

Variant	Animation	Duration	Easing
Success	slide + bounce + checkmark draw	300ms	spring-bouncy
Error	slide + shake	250ms + 150ms	emphasized-decelerate
Info	slide	250ms	emphasized-decelerate

Input / Form Field

States:

Idle -> Focus -> Filled -> Blur
Any -> Error
Any -> Success

State	Animation	Duration	Easing
Label Float	translateY + scale(0.85)	`short-3`	`standard-decelerate`
Focus Ring	border + shadow	`short-3`	`standard-decelerate`
Error	shake + border color	150ms	`ease-out`

Checkbox

States:

Unchecked -> Checked -> Unchecked

Animation	Property	Duration	Easing
Check Draw	stroke-dashoffset	`short-3`	`emphasized-decelerate`
Box Fill	background-color	`short-3`	`standard`
Playful Bounce	scale 1.15	`short-4`	spring

Switch / Toggle

States:

Off -> On -> Off

Animation	Property	Duration	Easing
Knob Slide	translateX	`short-4`	spring-bouncy
Track Color	background-color	`short-3`	`standard`
Playful Squash	width stretch	`short-2`	`standard`

Dropdown / Select

States:

Closed -> Opening -> Open -> Closing -> Closed

Animation	Property	Duration	Easing
Menu Open	scaleY + opacity	`short-4`	`emphasized-decelerate`
Item Stagger	opacity + translateY	150ms	stagger 25ms

Accordion

States:

Collapsed -> Expanding -> Expanded -> Collapsing -> Collapsed

Animation	Property	Duration	Easing
Content Height	grid-template-rows	`medium-1`	`emphasized-decelerate`
Content Fade	opacity	`short-3`	`standard`
Icon Rotate	transform rotate(180deg)	`short-3`	`standard`

List Items

Animation	Property	Duration	Easing
Entrance Stagger	opacity + translateY	250ms	stagger 50ms
Swipe Dismiss	translateX + opacity + rotate	200ms	`emphasized-accelerate`

Accessibility Variants

All components must provide reduced motion alternatives:

@media (prefers-reduced-motion: reduce) {
  /* Disable all transform animations */
  .button, .card, .modal, .toast, .dropdown-menu {
    transition: opacity 100ms ease !important;
    transform: none !important;
    animation: none !important;
  }

  /* Keep essential state indicators */
  .button:hover, .card:hover {
    opacity: 0.9;
  }

  .button:focus-visible, .input:focus {
    box-shadow: 0 0 0 3px var(--color-primary-alpha);
  }

  /* Instant state changes */
  .checkbox:checked + .checkbox__box .checkbox__check {
    stroke-dashoffset: 0;
    transition: none;
  }
}

Quick Reference Table

Component	Enter	Exit	Hover	Press
Button	-	-	`translateY(-2px)`	`scale(0.95)`
Card	fade+slide	fade	`translateY(-4px)`	`scale(0.98)`
Modal	scale+fade	scale+fade	-	-
Toast	slide+bounce	slide+fade	-	-
Input	-	-	-	-
Checkbox	draw	fade	-	-
Switch	spring	spring	-	-
Dropdown	scaleY	scaleY	-	-
Accordion	height	height	-	-
List Item	stagger	slide	background	-

Related Skills

animation-recipes - Pre-built recipes for component animations
accessibility - WCAG compliance for interactive components
easing - Curve selection for component states
entrance-patterns - Entrance animations for components
exit-patterns - Exit animations for components

دانلود ZIP