Animating Focus with View Transitions

"To help ensure high accessibility for sighted keyboard users, we've added some nifty keyboard focus indicators for links and form controls. A distinctive color change and slight transition draw visual attention to focused links. Additionally, scripting provides a focus 'trace' or 'flying focus' to help the user follow the visual focus. Tab through the links on this page to see it in action."

"If you can't see the video, imagine blue focus outlines around things like navigation links and breadcrumb nav links that have a "flying" animation between them as you tab through the page. I'm just going to go ahead and say this idea I'm about to play with probably isn't a good idea. It's a bunch of probably-unnecessary motion. Nobody is asking for it."

"Ben's implementation, along with several others I looked at, involves having a reference in JavaScript to the focused element, measuring its location and dimensions with things like getBoundingClientRect and/or getClientRects (in case the lines of text break) then animating/transitioning between the new numbers you get. That's fine, I suppose. But in my experience, measuring things in JavaScript isn't particularly performant, nor is animating values like top and left."

"I also note their implementation respects prefers-reduced-motion, which seems highly relevant. Me, I just find all this a fun and interesting challenge, especially since there is a long line of people doing it over the years, and now there is new tech to add to the party."

Focus ring animation can be applied to elements that receive keyboard focus, including :focus and :focus-visible styles. A visual example uses blue focus outlines that “fly” between navigation links and breadcrumb links as users tab through a page. WebAIM uses distinctive color changes and slight transitions to draw attention to focused links, plus scripting that provides a focus trace to help users follow where focus moves. Implementations can respect prefers-reduced-motion. A common approach measures the focused element’s position and size using getBoundingClientRect or getClientRects, then animates between the previous and new measurements. Concerns include performance costs from JavaScript measurement and animating top and left values.

Read at Frontendmasters