Transitions and Animations

Motion should clarify interaction, not distract from it. Modern CSS gives you lightweight tools for both micro-interactions and richer animated states.

A Clean Button Hover

.button {
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
}

Transition Rules

• animate only the properties that need motion
• keep durations short for UI feedback
• use easing to make movement feel natural

Keyframe Example

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel {
  animation: float-in 300ms ease-out;
}

Prefer Performant Properties

The safest properties to animate are usually:

• transform
• opacity

These avoid expensive layout recalculation compared with animating width, height, or top/left in many cases.

Accessibility Reminder

If an interface uses significant motion, consider honoring prefers-reduced-motion.

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

Next Step

Continue to Pseudo-Classes to learn how state, structure, and interaction can change styles without extra JavaScript.