CSS Transitions, Transforms & Micro-Interactions

« Responsive Images & aspect-ratio« Previous UTF-8 Character Sets & Modern Emojis »Next »

Create hardware-accelerated 60fps micro-interactions using transform and opacity, while respecting prefers-reduced-motion.

High-Performance 60fps Properties

Only two CSS properties can be animated by the GPU compositor without triggering expensive browser layouts or repaints: transform and opacity. Animating width, height, margin, or top causes frame drops.

Card Hover Micro-Interaction

Try It Yourself »

.card {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  will-change: transform;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
}

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which two CSS properties are handled directly by the GPU compositor for smooth 60fps animations without triggering reflow?

« Previous: Responsive Images & aspect-ratio Next: UTF-8 Character Sets & Modern Emojis »