実際と少し異なる場合があります。
この設定はアニメーションに反映されます
PRO機能:
テキストアニメーション設定は有料版（ZenBlocks PRO）で利用できる機能です。無料版ではこのパネルは利用できません。
ホバー
実際と少し異なる場合があります。
ポイント:
ホバー時に適用するアニメーションを選択します。ユーザーへの反応フィードバックを作る設定です。
この設定で変わること:
変化があることで「操作可能」な要素だと認識しやすくなります。
調整のコツ:
可読性を落とさない範囲で、短時間・小変化のアニメーションを選ぶと実用的です。
設定項目
- アニメーションプリセット選択: テキストの動き方を選択します。読みやすさを優先して控えめな演出から試します。選択肢には
none（なし）や各種ホバーアニメーションパターンが含まれます。
テキストアニメーションはホバー時にのみ発動します。アニメーション中はテキストが一時的に可読性を失うケースがあるため、短い Duration 設定が推奨です。スタイル設定のトランジションと併用する場合、両方の Duration / Delay が合算されて体感的な遅延になることがあります。アニメーション有効時はスタイル設定のトランジションパネルに注意表示が出ます。
30文字制限:
テキストアニメーションは内部的に1文字ずつ<span>で囲み、文字ごとに遅延を付ける仕組みです。この遅延処理は最大30文字までしか生成されません。31文字目以降のテキストにはアニメーション遅延が適用されず、一括で動作します。文字ラップの最適化:
テキストアニメーションがnoneの場合、パフォーマンス最適化のため文字ごとの<span>ラッピングは省略されます。アニメーションを有効にした時点で自動的にラッピングが適用されます。
トランジション
実際と少し異なる場合があります。
ポイント:
テキストアニメーションの切替速度を設定します。文字の可読性を維持しながら動きを制御します。
この設定で変わること:
同じアニメーションでも時間設定で印象が大きく変わります。
調整のコツ:
遷移中に読みにくくなる場合は、Duration短縮とDelay削減から調整するのが効果的です。
設定項目
Duration (ms): アニメーションの再生時間。短めだと反応が軽く、長めだと演出感が強まります。Delay (ms): ホバー後に動き始めるまでの待機時間。不要な遅延は操作感を下げます。Easing: 速度変化のパターン。ease-out系は自然な停止感を作りやすいです。Custom Value: 独自のイージング値を入力し、ブランドトーンに合わせた動きへ調整します。Reset: トランジション設定を初期状態に戻します。
テキストアニメーションのトランジションは、スタイル設定のトランジションやアイコンアニメーションのトランジションとは独立して動作します。それぞれ個別に Duration / Delay を調整できるため、テキストとアイコンで異なるタイミングの演出が可能です。