実際と少し異なる場合があります。
この設定はアニメーションに反映されます
PRO機能:
ボタンアニメーション設定は有料版（ZenBlocks PRO）で利用できる機能です。無料版ではこのパネルは利用できません。
デフォルト
実際と少し異なる場合があります。
ポイント:
通常状態で適用するアニメーションを設定します。常時演出の強さを調整できます。
この設定で変わること:
動きが常に見えるため、ブランドトーンへの影響が大きい項目です。
調整のコツ:
長時間閲覧を想定し、視認性や疲労感を損なわない穏やかな設定を推奨します。
設定項目
- アニメーションプリセット選択: ボタン本体のアニメーション種類を選択します。注目度を上げたい箇所で使います。選択肢には
none（なし）や各種常時アニメーションパターンが含まれます。
ボタンアニメーションは常時（ホバーに関係なく）再生される点がテキスト・アイコンアニメーションと異なります。ボタン全体が動くため最も訴求力が高い反面、過度な使用はページ全体の品質低下や離脱率上昇の原因になります。LPのファーストビューなど、限定的なセクションでの使用が推奨です。デフォルトの Duration は
2000ms、Easing はease-in-out、Loop Interval は1000msです。
トランジション
<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>
ポイント:
ボタン本体アニメーションの速度やループ間隔を設定します。CTAの注目度を制御する設定です。
この設定で変わること:
本体が動くため訴求力は高い一方、過剰設定は離脱要因になります。
調整のコツ:
限定的なセクションで使用し、通常ページでは弱め設定に留めるのが実運用向きです。
設定項目
Animation Duration (ms): 1サイクルの再生時間。長短で演出の落ち着きが変わります。Easing: 速度変化の種類。CTAらしい自然な動きに調整します。Custom Value: 独自イージング値。既存プリセットで合わない場合に指定します。Loop Interval (ms): ループ間隔。短すぎると騒がしく見えるため注意が必要です。Reset: 変更内容を初期値へ戻し、再調整をやり直せます。
ボタンアニメーションとフレームアニメーションは同時に使用できますが、両方が動くと視覚的に煩雑になりやすいため、併用する場合はどちらかの演出を控えめにすることを推奨します。
transform プロパティの競合:
ボタンアニメーションの多くは CSStransform（translateX、translateY、scale、rotate等）を使用します。レイアウト設定のTransform TranslateやバンドのSkewとは適用レイヤーが異なるため直接競合はしませんが、カスタムCSSでtransformをボタン本体に追加している場合はアニメーション中に上書きされます。prefers-reduced-motion 非対応:
現在の実装ではprefers-reduced-motionメディアクエリによるアニメーション自動抑制は行われません。ユーザーが「動きを減らす」設定をしていてもアニメーションは再生されます。アクセシビリティ配慮が必要な場合は、テーマ側でprefers-reduced-motionに対応するCSSを追加することを検討してください。