Playground
Why?
Keyboard navigation has a major downside: it’s not clear where the focus moves upon pressing the Tab key. Animation makes the transition more apparent.
How?
Flying Focus creates an element that is moving when the focus event happens.
outline: 5px auto -webkit-focus-ring-color makes the element look like it has a focus. It only works in Safari and Chrome.
Firefox doesn’t support outline-style: auto so box-shadow is used instead:
box-shadow: 0 0 2px 3px #78aeda, 0 0 2px #78aeda inset;
border-radius: 3px;Previously, I actually focused on the moving element. It affected focus and blur events on web pages, making some dropdown menus unusable. Faking the focus solves the problem.
pointer-events: none achieves click-through effect.
Install
Flying Focus is available as a standalone JS file that you can include on your website. Chrome and Safari extensions enable Flying Focus on all websites. It’s all free and open-source.