Motion & Animation
Thoughtful motion that enhances usability, provides feedback, and creates delightful experiences while respecting user preferences and accessibility needs.
Motion Principles
Purposeful
Every animation serves a specific purpose - guiding attention, providing feedback, or clarifying relationships.
Examples
Loading states show progress and maintain engagement
Hover effects confirm interactive elements
Transitions reveal spatial relationships between screens
Fast & Responsive
Animations feel immediate and never slow down the user experience.
Examples
Micro-interactions complete in under 200ms
State changes provide instant visual feedback
Complex animations use progressive enhancement
Natural
Motion follows real-world physics and familiar patterns.
Examples
Objects ease out when entering (like gentle deceleration)
Items have appropriate weight and momentum
Grouped elements move cohesively
Respectful
Animations respect user preferences and accessibility needs.
Examples
Reduced motion settings are honored
No flashing or rapid movement that could trigger vestibular disorders
Users can disable animations system-wide
Easing Functions
The right easing curve makes animations feel natural and intentional. Choose based on the type of transition and user expectation.
ease-out
Starts fast and decelerates smoothly
CSS Value
cubic-bezier(0, 0, 0.2, 1)Best for
Most common - elements entering the screen
ease-in
Starts slow and accelerates
CSS Value
cubic-bezier(0.4, 0, 1, 1)Best for
Elements leaving the screen
ease-in-out
Smooth acceleration and deceleration
CSS Value
cubic-bezier(0.4, 0, 0.2, 1)Best for
Elements changing position
spring
Natural spring-like motion with slight overshoot
CSS Value
cubic-bezier(0.175, 0.885, 0.32, 1.275)Best for
Playful interactions, emphasis
Duration Guidelines
Fast
Immediate feedback that feels responsive
Use for: Micro-interactions, hover states, focus changes
Default
Balanced speed for most interactions
Use for: Standard component transitions, state changes
Moderate
Gives users time to understand the change
Use for: Modal dialogs, overlays, complex transitions
Slow
Dramatic transitions that draw attention
Use for: Page transitions, major layout changes
Animation Patterns
Micro-interactions
Small animations that provide immediate feedback and enhance the user's sense of direct manipulation.
Examples
/* Button hover effect */
.button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 150ms ease-out;
}
/* Input focus ring */
.input:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
transition: outline 150ms ease-out;
}State Transitions
Smooth transitions between different states help users understand what changed and maintain context.
Examples
/* Loading state */
.button[data-loading="true"] {
color: transparent;
transition: color 250ms ease-out;
}
/* Accordion expand */
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 350ms ease-out;
}
.accordion-content[data-expanded="true"] {
max-height: 1000px;
}Enter & Exit Animations
Elements should enter and exit in ways that feel natural and help users understand spatial relationships.
Examples
/* Modal enter */
@keyframes modalEnter {
from {
opacity: 0;
transform: scale(0.95) translateY(-10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Slide in from right */
@keyframes slideInRight {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}Loading Animations
Loading states should be calm, non-intrusive, and give users a sense of progress and control.
Examples
/* Pulse animation */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Spinner rotation */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.spinner {
animation: spin 1s linear infinite;
}Accessibility Considerations
Reduced Motion Support
Always respect the user's motion preferences. Some users experience vestibular disorders that make motion sickness more likely.
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Alternative: Simplified animations */
@media (prefers-reduced-motion: reduce) {
.modal {
animation: none;
transition: opacity 150ms ease-out;
}
}Safe Animation Guidelines
Avoid
Flashing more than 3 times per second
Parallax scrolling without opt-out
Auto-playing video with motion
Infinite auto-carousels
Prefer
User-triggered animations
Fade and scale transitions
Progressive enhancement
Pause/stop controls
Performance Best Practices
GPU Acceleration
Use transform and opacity for smooth 60fps animations. These properties are GPU-accelerated.
/* ✅ GPU accelerated */
.element {
transform: translateX(100px);
opacity: 0.5;
transition: transform 250ms ease-out;
}
/* ❌ CPU heavy */
.element {
left: 100px;
width: 200px;
transition: left 250ms ease-out;
}Animation Optimization
Optimize animations for performance and battery life, especially on mobile devices.
Techniques
Use will-change property sparingly
Remove animations outside viewport
Use transform3d() to trigger hardware acceleration
Batch DOM updates and use requestAnimationFrame