CSSのアニメーションで、下から上に上がり続けるバーを実装したい。

前提・実現したいこと

CSSで、青い背景上で、白いぼやけたラインが下から一番上まで上がると、また一番下から上がってくる、というのを実現したいです。
(※これをさらに他の画面全体に広がるような画像でマスクして、ローディング画面のようなものを作りたい)

発生している問題・エラーメッセージ

上記を実現するため、下記のソースコードのように、linear-gradientで、青い画面の上に白いぼやけた線の引かれた背景を実装しました。さらにそれの背景について、animationと@keyframesを用いて、「background-positionを、4秒で0から、-1000pxに上げる」を繰り返すプログラムを書きました。
しかし、この方法では、-1000pxに上がりきったタイミングで0pxに戻す時に、アニメーションに断絶が入ってしまいます。
本当は、画面高さがOOpxとわかっていれば、-1000pxの代わりに-OOpxとおけば良いのだと思いますが、要素のサイズを常に画面いっぱいに広がる大きさとして実装したい(つまりheight:100%)と考えています。また、background-positionに、-100%と書ければよかったのですが%表記は読み取ってくれないないようでした。
どういった方法で、アニメーションの断絶なしにこれを実装できるのでしょうか？
基本的にはCSSのみでの実現を考えていますが、jQueryなどを使って実装すべきでしょうか。
どちらでも可能ならより軽い方法で実装したいです。

また少し話がずれるのですが、background-positionがy軸でマイナスになった時、上のはみ出た部分は要素の下側から顔を出す(例えばタテ100pxの要素の背景だったら、y軸のbackground-positionが-30pxになると、一番上の30px分が要素の最下部に表示される)というような挙動が確認されるのですが、これはCSSの仕様だと考えて問題ないのでしょうか。

該当のソースコード

HTML
1<body>
2    <div id="loader">
3      <div id="loadertext">
4        <h1 class="load_talk">ロード中です...</h1>
5      </div>
6      <div id="inadumaLoader">
7        <div id="backLoader"></div>
8      </div>
9    </div>
10
11    <div id="fade"></div>
12    <div class="bodyunder">
13    ......中略
14    </div>
15</body>

CSS
1#inadumaLoader{
2  position: fixed;
3  width: 100%;
4  height:100%;
5  -webkit-mask-image: url("../img/マスク用画像.gif");
6  mask-image: url("../img/マスク用画像.gif");
7  mask-repeat:repeat;
8  -webkit-mask-repeat:repeat;
9  z-index:7;
10}
11
12#backLoader{
13  position: relative;
14  width:100%;
15  height:100%;
16  background-size:auto 100%;
17  -moz-linear-gradient(bottom, skyblue 10px, white 20px,skyblue 30px);
18  background: -webkit-linear-gradient(bottom, skyblue 10px, white 20px,skyblue 30px);
19  background: linear-gradient(to top, skyblue 10px, white 20px,skyblue 30px);
20  animation: move_inaduma 4s linear infinite;
21  z-index:7;
22}
23
24@keyframes move_inaduma {
250% {background-position: 0 0;}
26  100% {background-position: -1000px -1000px;}
27}

補足情報（FW/ツールのバージョンなど）

ブラウザはGooglechromeをつかって確認しています。

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

回答1件

ベストアンサー

https://jsfiddle.net/d8y2kjLc/
このような動きで良いのでしょうか？
速度等は調整してください。

CSS
1@keyframes move_inaduma {
2  0% {
3    background-position: 0;
4  }
5
6  100% {
7    background-position: 0 -100vh;
8  }
9}

background-positionがy軸でマイナスになった時、上のはみ出た部分は要素の下側から顔を出す

こちらはbackground-repeatプロパティがrepeatになっている場合、そのような挙動をします。

投稿2019/10/16 07:32

okne

総合スコア217

aoies

2019/10/16 18:52

なるほど、vhという便利な単位があるんですね! 助かりました。 jsfiddle便利そうですね。文章でデザインの説明するの難しいなと思っていました。質問わかりにくかったと思います... 今後使ってみます。ーbackground-repeatプロパティがrepeat...... 確かに、考えてみたらそうですね！丁寧な回答ありがとうございました。

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