アニメーションが動かない・再生されない – ZenBlocks buttonBasic
結論
アニメーションが動かない原因は、**対象要素の未設定・アニメーション種別の誤認・エディタでの確認**のいずれかです。アニメーションの種類ごとに発動条件が異なるため、まず種類を確認してください。
—
原因
- **前提となる要素が未設定**: アイコンアニメーションはアイコンが、フレームアニメーションはアイコンフレームが未設定だと無効です
- **エディタ上で確認している**: ホバー型アニメーションはエディタではなくフロントエンドで確認が必要です
- **アニメーション選択が `none`**: プリセットが `none` のままだとアニメーションは発動しません
解決手順
- どのアニメーションを設定したか確認する（テキスト / アイコン / フレーム / ボタン）
- 該当するアニメーション設定パネルを開く
- プリセットが `none` でないことを確認する
- **テキストアニメーション**: メインテキストが入力されているか確認
- **アイコンアニメーション**: アイコン設定でアイコンが選択されているか確認
- **フレームアニメーション**: アイコン設定 > フレームが有効になっているか確認
- **ボタンアニメーション**: 特に前提条件なし
- エディタのプレビューではなく、実際のフロントエンドページを開く
- ホバー型（テキスト / アイコン / ボタン）はマウスオーバーで発動を確認
- 常時型（フレーム）はページ読み込み直後から再生されているか確認
- 各アニメーションのトランジションパネルを開く
- Duration が極端に短くないか確認（短すぎると動きが視認できない）
- Delay が長すぎないか確認（ホバーしてから動き始めるまでの待ち時間）
よくあるつまずき
– **テキストアニメーションの30文字制限**: テキストアニメーションは最大30文字までしか文字ごとの遅延が適用されません。31文字目以降は一括で動作します。
– **フレームアニメーションの overflow**: `neon-01` / `glow-01` は `box-shadow` を使うため、フレーム要素に `overflow: visible` が自動適用されます。ボタン領域外にエフェクトがはみ出すことがあります。
– **アイコンアニメーションの排他制御**: アイコンアニメーションが有効な場合、アイコンの表示/非表示制御はアニメーション側が担います。—