Smooth Focus Ring Transition for Accessibility

Animated Focus Indicators

Default browser focus outlines are functional but visually jarring. CSS transitions let you create smooth, branded focus indicators while maintaining accessibility.

Box-Shadow Approach

.input {
  outline: none;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  transition: box-shadow 0.2s ease;
}

.input:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

Why focus-visible Instead of focus?

:focus-visible only activates for keyboard navigation, not mouse clicks. This prevents the focus ring from appearing when users click with a mouse (which they typically do not need), while ensuring keyboard users always see the indicator.

Outline Approach (Modern Browsers)

Modern browsers support outline-offset transitions:

.button {
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.2s ease,
              outline-offset 0.2s ease;
}

.button:focus-visible {
  outline-color: #3b82f6;
  outline-offset: 4px;
}

Combined Pattern

The most robust approach combines both for consistent cross-browser behavior:

.interactive {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  transition: outline-color 0.2s ease,
              outline-offset 0.2s ease,
              box-shadow 0.2s ease;
}

.interactive:focus-visible {
  outline-color: #3b82f6;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

Accessibility Requirements

WCAG 2.4.7 requires that keyboard focus indicators are visible. Never remove focus styles without providing an alternative. The transition makes the focus ring appearance feel polished without removing the indicator.