ローディングについて

日本語 ディスカッション 技術的なQ＆A
, ,

Topic summary

ローディング画面のSVG画像にフェードインアニメーションを実装しようとしているが、うまく表示されない問題について質問が投稿されました。

実装したい内容:

  • SVG画像が浮かび上がってくるようなフェードイン効果

提供されたコード:

  • HTML: <aside id="loader"> 内にSVG画像を配置
  • CSS: fadeInloader と fadeOutloader のキーフレームアニメーション
  • JavaScript: sessionStorageを使った訪問済みチェック機能

解決策:
Qcoltd氏が .loader のCSSプロパティを変更する提案を行いました。具体的には animation プロパティを fadeInloader に変更し、opacity と visibility の初期値を調整する修正案が提示されました。

結果:
質問者は提案された解決策で問題が解決したことを報告し、感謝の意を表明しました。

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
2

@EUROU 様

質問者様の要望をしっかり把握できていない可能性が高いのですが、

.loaderの記述を下記に変更する、ではやりたいことと異なりますか？

.loader {
position: fixed;
z-index: 2147483647;
top: 0;
left: 0;
background-color: black;
width: 100vw;
height: 100vh;
opacity: 1;
visibility: hidden;
will-change: opacity, visibility;
animation: fadeInloader 0.5s forwards;
animation-delay: 2s;
pointer-events: none;
}

ご参考まで。

(キュー田辺)