実際と少し異なる場合があります。
この設定はアニメーションに反映されます
PRO機能:
アイコンアニメーション設定は有料版（ZenBlocks PRO）で利用できる機能です。無料版ではこのパネルは利用できません。
ホバー
実際と少し異なる場合があります。
ポイント:
ホバー時に適用するアニメーションを選択します。ユーザーへの反応フィードバックを作る設定です。
この設定で変わること:
変化があることで「操作可能」な要素だと認識しやすくなります。
調整のコツ:
可読性を落とさない範囲で、短時間・小変化のアニメーションを選ぶと実用的です。
設定項目
- アニメーションプリセット選択: アイコンの動き方を選択します。主文言を邪魔しない小さな動きが基本です。選択肢には
none（なし）や各種ホバーアニメーションパターンが含まれます。
アイコンアニメーションはホバー時にのみ発動します。テキストアニメーションと組み合わせる場合は、両方が同時に動くと騒がしくなるため、Delay を使って時間差をつける運用が効果的です。アイコンが未設定の場合、この設定は無効になります。
通常ホバー効果との排他制御:
アイコンアニメーションが有効な場合、アイコンの opacity / visibility はアニメーション側のCSSが優先されます。アイコン設定パネルで設定したホバー時の色やサイズ変化とアニメーションが同時に適用されますが、表示/非表示の制御はアニメーション側が担います。
トランジション
実際と少し異なる場合があります。
ポイント:
アイコンアニメーションの切替速度を設定します。反応感を保ちつつ過剰演出を抑える項目です。
この設定で変わること:
小さなアイコンほど速い設定が自然に感じられます。
調整のコツ:
まず短めに設定し、必要があればDelayでわずかに余韻を加える運用がおすすめです。
設定項目
Duration (ms): アイコン動作の長さ。短いほど軽快、長いほど装飾感が強くなります。Delay (ms): 動き始めの遅延時間。基本は短くして反応遅れを防ぎます。Easing: 速度カーブ。動きの質感を自然に見せるために使用します。Custom Value: カスタムイージング値。既定値で合わない場合に細かく調整します。Reset: 変更したトランジション設定を初期値へ戻します。
アイコンアニメーションのトランジションは、アイコン設定パネル内のトランジション（色・サイズ・ポジション用）とは別の設定です。アニメーション自体の再生速度をここで制御し、ホバー時のプロパティ変化はアイコン設定側のトランジションで制御します。