メインコンテンツにスキップ

「出現時」のアニメーションが表示されない原因と対処法

条件付きスタイル「出現時」を使いアニメーションを設定したボックスが表示されない場合、ボックスがその親ボックスまたは画面からはみ出ていることが主な原因です。レスポンシブ設定時のモバイル画面幅でよく発生します。

今日アップデートされました

ℹ️ 2025年11月25日にリリースした「Editor 5.0」では、メニュー配置や操作手順が異なる場合があります。

「出現時」のアニメーションが動作しない原因

条件付きスタイル「出現時」のボックスが表示されず、アニメーションが動作しない主な原因は以下の2つです。

  • アニメーションを設定したボックスが「画面の外」に完全に出ている

  • アニメーションを設定したボックスが「親ボックスの外」に完全に出ている
    ※ただし、親ボックスに重なっていなくても、親ボックスのはみだし設定が[表示]であればアニメーションが動作します。

尚、どちらか一方に少しでも重なっていれば、アニメーションは動作してボックスが表示されます。

スクリーンショット:ボックスが親ボックスまたは画面内に収まっている様子。

注意:レスポンシブ対応時の出現アニメーションについて

ブレイクポイントごとに要素のサイズを変更した場合、スマートフォンなど画面幅が狭い環境では、アニメーションの開始位置が画面の外側になってしまうことがあります。 プレビュー時などにボックスが表示されない場合は、エディタ上でボックスが画面からはみ出していないか確認してください。一部でも画面内に表示されていれば、アニメーションは正常に動作します。

親ボックスのはみだし設定

はみ出し設定について詳しくは、以下のヘルプ記事をご覧ください。

スクリーンショット:はみ出し設定を変更している様子。

appear

こちらの回答で解決しましたか?