Used to animate the outline offset when an interactive element receives focus only when it's visible.

animated-outline.css

:root {
  --outline-color: #346ebd;
  --outline: 2px solid var(--outline-color);
}

* {
  outline-offset: -2px;
}

*:not(:active):focus-visible {
  outline: var(--outline);
  outline-offset: 2px;
}

.focus-visible:has(:not(:active):focus-visible) {
  outline: var(--outline);
  outline-offset: 2px;
}

.focus-visible:has(:not(:active):focus-visible) :focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: no-preference) {
  * {
    will-change: outline-offset;
    transition: outline-offset 75ms ease-out;
  }

  *:not(:active):focus-visible,
  .focus-visible:has(:not(:active):focus-visible) {
    transition: outline-offset 25ms ease-out;
  }
}

Example Video

Screen.Recording.2022-10-06.at.12.35.12.mov