May differ slightly from the actual interface.
This setting applies to the animation
Hover
May differ slightly from the actual interface.
Key Point:
Select the animation applied on Hover. This setting creates responsive feedback for the user.
What this changes:
Visible changes help users recognize the element as interactive.
Adjustment tips:
Choose a short, subtle animation that does not sacrifice readability for a practical result.
Settings
- Animation Preset selection: Select how the icon moves. A small, unobtrusive motion that does not distract from the main label is the baseline. Options include
none(off) and various Hover animation patterns.
Icon Animation activates only on Hover. When combining it with Text Animation, both animating simultaneously can feel cluttered — using Delay to stagger the timing is an effective approach. If no icon is set, this setting has no effect.
Exclusive control with standard Hover effects:
When Icon Animation is active, the icon's opacity / visibility is controlled by the animation CSS. While Hover color and size changes set in the Icon Settings panel still apply simultaneously, show/hide behavior is managed by the animation side.
Transition
May differ slightly from the actual interface.
Key Point:
Set the playback speed of the Icon Animation. Maintains responsiveness while preventing over-the-top effects.
What this changes:
Smaller icons tend to look more natural with faster settings.
Adjustment tips:
Start with a short value and, if needed, add a slight Delay for a lingering feel.
Settings
Duration (ms): Length of the icon motion. Shorter values feel light and quick; longer values add a decorative feel.Delay (ms): Wait time before the animation starts. Keep it short as a baseline to avoid a sluggish response.Easing: Speed curve. Used to make the motion look natural.Custom Value: Custom Easing value. Fine-tune when the default values do not fit your needs.Reset: Resets the modified Transition settings to their defaults.
The Icon Animation Transition is separate from the Transition in the Icon Settings panel (used for color, size, and position changes). Use this setting to control the playback speed of the animation itself, while property changes on Hover are controlled by the Icon Settings Transition.