May differ slightly from the actual interface.
This setting applies to the animation
Default
May differ slightly from the actual interface.
Key Point:
Set the animation applied in the default (non-Hover) state. Controls the intensity of the always-on effect.
What this changes:
Because the motion is always visible, it has a significant impact on brand tone.
Adjustment tips:
Assuming extended viewing, use a gentle setting that does not impair readability or cause visual fatigue.
Settings
- Animation Preset selection: Select the animation type for the button body. Use it where you want to increase attention. Options include
none(off) and various always-on animation patterns.
Button Animation plays continuously regardless of Hover state, which differs from Text Animation and Icon Animation. Because the entire button moves, it offers the strongest visual impact — however, overuse can degrade overall page quality and increase bounce rates. Recommended for limited sections such as the first view of a landing page. The default Duration is
2000ms, Easing isease-in-out, and Loop Interval is1000ms.
Transition
<hr style="margin-top:60px"> <p style="font-size:12px;color:#999;">Total: 109 | Rendered: 109 | Skipped: 0</p><p class="docs-capture-placeholder__caption">実際と少し異なる場合があります。</p>
Key Point:
Set the speed and Loop Interval for the button body animation. Controls the attention level of the CTA.
What this changes:
Because the body itself moves, the visual impact is high — but excessive settings can drive users away.
Adjustment tips:
Use it in limited sections and keep the settings mild on regular pages for practical use.
Settings
Animation Duration (ms): Playback time per cycle. Shorter or longer values change how calm or energetic the effect feels.Easing: Speed curve type. Adjust for natural CTA-appropriate motion.Custom Value: Custom Easing value. Specify when existing Presets do not fit your needs.Loop Interval (ms): Loop interval. Setting it too short makes the button feel restless, so use with care.Reset: Resets all changes to their defaults so you can start adjusting again.
Button Animation and Frame Animation can be used simultaneously, but having both animate at once tends to create visual clutter. When combining them, it is recommended to keep one of the two effects subtle.
Transform property conflicts:
Many Button Animations use CSStransform(translateX,translateY,scale,rotate, etc.). Because they are applied on a different layer than the Layout settingsTransform Translateor bandSkew, there is no direct conflict. However, if you add custom CSStransformto the button body, it may be overridden during the animation.No prefers-reduced-motion support:
The current implementation does not automatically suppress animations via theprefers-reduced-motionmedia query. Animations will play even when the user has enabled the "reduce motion" setting. If accessibility considerations are required, consider adding CSS that respectsprefers-reduced-motionon the theme side.