What Are Micro-interactions?
Micro-interactions are the small, subtle animations that bring interfaces to life. They provide feedback, guide users, and create a sense of polish that separates great products from good ones.
Cheap vs Expensive Properties
The key to smooth animations lies in understanding what properties are cheap to animate. Transform and opacity are hardware-accelerated and can run at 60fps, while properties like width and height trigger layout recalculations.
/* ✅ Cheap — GPU accelerated */
.card{ transition: transform 0.3s ease, opacity 0.3s ease; }
.card:hover{ transform: translateY(-4px); }
/* ❌ Expensive — triggers layout */
.card:hover{ height: 200px; margin-top: -4px; }Timing Functions
Timing functions play a crucial role in how animations feel. Linear animations often feel mechanical, while easing functions like ease-out or custom cubic-beziers create more natural movement.
/* Natural spring-like feel */
.button{ transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }CSS Custom Properties for Animation Systems
CSS custom properties have revolutionized how we build animation systems. They allow us to create consistent, maintainable animation tokens.
:root{
--duration-fast: 150ms;
--duration-normal: 300ms;
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}Accessibility
The prefers-reduced-motion media query is essential for accessibility. Some users experience motion sickness from animations.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after{
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Conclusion
Animation is a powerful tool, but it should enhance the user experience, not distract from it. The best animations are ones users don't consciously notice but would miss if they were gone.