Settings — Focus Transition for WordPress

By default Snail Transition with 0.5s animation speed and purple gradient color is enabled. However, depending on your needs, you can change behavior and appearance of the plugin.

The following is a screenshot of plugin settings and explaining each option.

Transition Type. The plugin offers four different transition effects that users can choose from:

• Flying: The focus outline flies to the next element, drawing attention to it.
• Hug: The focus outline embraces the current element, visually highlighting it.
• Snail: The transition occurs as a gradient-colored strip, smoothly guiding the focus to the next element.
• Zoom: The focused element slightly enlarges and then returns to its normal state, creating a zoom effect.

Animation Time: Set the animation time for the transition. The time also depends on the distance between the elements.

Start/Middle/End Colors: Only for Snail Transition. Set the gradient colors for the transition.

Focused Style

Style for an element (such as a form input) that has received focus.

Outline Width: Sets the outline thickness of the focused element. The outline is a line that is drawn around the element, outside the border.

Outline Style: Sets the outline style of the focused element. Possible values are: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden.

Outline Color: Sets the outline color of the focused element. The color can be set using a color picker or by entering a HEX value.

Outline Offset: Sets the outline offset of the focused element. The offset is the distance between the outline and the border of the element.

Focusable Elements

Enable to add custom elements to be focusable, like headers or images. You can specify multiple selectors separated by commas.