実際と少し異なる場合があります。
この設定はアニメーションに反映されます
PRO機能:
フレームアニメーション設定は有料版（ZenBlocks PRO）で利用できる機能です。無料版ではこのパネルは利用できません。
デフォルト
実際と少し異なる場合があります。
ポイント:
通常状態で適用するアニメーションを設定します。常時演出の強さを調整できます。
この設定で変わること:
動きが常に見えるため、ブランドトーンへの影響が大きい項目です。
調整のコツ:
長時間閲覧を想定し、視認性や疲労感を損なわない穏やかな設定を推奨します。
設定項目
- アニメーションプリセット選択: フレーム線の演出パターンを選択します。常時表示のため視認負荷を抑えた設定が適しています。選択肢には
none（なし）や各種常時アニメーションパターンが含まれます。
フレームアニメーションは常時（ホバーに関係なく）再生される点がテキスト・アイコンアニメーションと異なります。ページ読み込み直後から動き続けるため、ユーザーの視線を誘引する効果がある一方、過剰な演出は疲労感を与えます。アイコンフレームが設定されていない場合、この設定は無効になります（DOM自体が出力されません）。
overflow 制限:
neon-01とglow-01のフレームアニメーションはbox-shadowを使用するため、フレーム要素にoverflow: visibleが自動適用されます。他のアニメーションではoverflow: hiddenのままです。overflow: visibleの場合、光彩エフェクトがボタン領域外にはみ出して表示されるため、隣接要素との間隔に注意してください。
トランジション
実際と少し異なる場合があります。
ポイント:
フレームアニメーションの再生速度とループ間隔を設定します。装飾演出の存在感を調整できます。
この設定で変わること:
常時表示に近いため、ページ全体の印象を左右します。
調整のコツ:
目立たせたい場面以外では、間隔を長めにして主文言への集中を優先してください。
設定項目
Animation Duration (ms): 1回の再生時間。短すぎると忙しく見えるため中程度から調整します。Easing: フレーム動作の速度変化。滑らかなカーブを選ぶと目障りを抑えられます。Loop Interval (ms): 次の再生までの間隔。長めにすると主コンテンツへの集中を維持できます。デフォルト値は設定されています。
フレームアニメーションにはトランジションの Delay / Custom Value 設定はなく、Duration / Easing / Loop Interval の3項目で制御します。テキスト・アイコンアニメーション（ホバー型）とは設計思想が異なるため、トランジション設定の構成も異なります。