scroll() 動かない　

実現したいこと

通常アニメーションとスクロール連動アニメーションをそれぞれ動かしたいです！
最初にテキストがフェードインされて上下に動くのが通常アニメーション/一定位置までスクロールしていくとフェードアウトして消えていくような動きにしたいです！　

発生している問題・分からないこと

スクロール連動アニメーションはこの書き方で動くのですが通常アニメーションが機能しません…
スクロール連動アニメーションは使わず、通常アニメーションのみであれば動きます。
noneがいけないのでしょうか…？　

該当のソースコード

css
1.main-title{
2  position: absolute;
3  top: 37%;
4  left: 45%;
5  font-size: 36px;
6  font-family: serif;
7  color: white;
8  pointer-events: none;
9  mix-blend-mode: overlay;
10  opacity: 0;
11  animation: fadeIn 2s ease-out forwards,moveUpDown 5s infinite,switch-fadeOut 2s ease-out forwards;
12  animation-timeline: none,none,scroll();
13  animation-range: none,none,0% 30%;
14}

css
1@keyframes switch-fadeOut {
2  0% { opacity: 1;}
3  100% { opacity: 0;}
4}
5@keyframes fadeIn {
6  0% {
7    opacity: 0;
8  }
9  100% {
10    opacity: 0.5;
11  }
12}
13
14@keyframes moveUpDown {
15  0% {
16    transform: translateY(0px);
17  }
18  50% {
19    transform: translateY(10.9251px);
20  }
21  100% {
22    transform: translateY(0px);
23  }
24}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

単独ではそれぞれ動くことは確認できた！　

補足

最近Webサイトを趣味で作成している初心者です。できればJavaScriptは使わずにcssでのみ制御したいです！　
優しく教えてくれると嬉しいです(´▽｀*)
何かアドバイスがあれば優しく教えてください。

行動規範の内容に同意します

回答1件

noneではなくてautoではいかがでしょうか。

初期値 auto
animation-timeline - CSS: カスケーディングスタイルシート | MDN

投稿2025/10/07 04:48

Lhankor_Mhy

総合スコア37621

meivel

2025/10/07 09:00

早々にご回答いただきありがとうございます！おかげさまでmoveUpDownのアニメーションは動きました(;O;) しかし、フェードインのアニメーションがまだ機能していません… 何かアドバイスありますでしょうか(;O;) .main-title{ position: absolute; top: 40%; left: 45%; font-size: 36px; font-family: serif; color: white; pointer-events: none; mix-blend-mode: overlay; opacity: 0; animation: fadeIn 2s ease-out forwards,moveUpDown 5s infinite,switch-fadeOut 2s ease-out forwards; animation-timeline: auto,auto,scroll(); animation-range: auto,auto,0% 30%; }