CSSアニメーションでスクロールダウンの動きを同じにしたい

スクロールダウンのアニメーションの調節がうまくいかないです。
https://i-ne.co.jp/の左にあるスクロールと同じ動きにしたいです。
線が下に吸い込まれるような動きです。
上記サイトの検証ツールからアニメーションのコードをコピーしました。

スクロールの線の外観はもとから作ってあり、動きだけ同じになるように色々と数値をいじったのですが
うまくいかなかったです。
８０％あたりでheightを短くしたりとか、１００％で０にしたりです。

よろしくお願いします。

.scroll {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 470px;
  margin-top: 100px;
  margin-right: auto;
  margin-left: auto;
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 1;
  text-transform: uppercase;
  position: relative;
}

.scroll:before {
  content: '';
  position: absolute;
  top: 300%;
  left: 50%;
  width: 2px;
  height: 270px;
  background: #C3C3C3;
}

.scroll:after {
  content: '';
  background: #000;
  position: absolute;
  top: 250%;
  left: 50%;
  width: 2px;
  height: 58px;
  -webkit-animation: scroll 3s cubic-bezier(0.19, 1, 0.22, 1) infinite;
          animation: scroll 3s cubic-bezier(0.19, 1, 0.22, 1) infinite;
  
}



@keyframes scroll {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  
 50%, 100% {
    -webkit-transform: translateY(220px);
            transform: translateY(220px);
    
  }
	80%{

	}
	100%{
		
	}

}
コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Practice</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="scroll">
		SCROLL
	</div>
</body>
</html>コード

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

回答1件

ベストアンサー

テキスト部分とライン部分は別のブロックにして、ラインにoverflow: hidden;を付与してはみ出した部分は非表示にするのが簡単かと。
その方がテキストとラインの位置関係の調整も楽だし。

html
1<div class="scroll">
2  <p>SCROLL</p>
3  <div class="scroll-line"></div>
4</div>

css
1.scroll {
2  width: fit-content;
3  margin-bottom: 470px;
4  margin-top: 100px;
5  margin-right: auto;
6  margin-left: auto;
7  font-size: 10px;
8  font-size: 0.625rem;
9  line-height: 1;
10  text-transform: uppercase;
11  position: relative;
12}
13
14.scroll-line {
15  position: absolute;
16  top: 30px;
17  left: 50%;
18  width: 2px;
19  height: 270px;
20  background: #C3C3C3;
21  overflow: hidden;
22}
23
24.scroll-line:after {
25  content: '';
26  background: #000;
27  position: absolute;
28  top: 0;
29  left: 0;
30  width: 2px;
31  height: 58px;
32  animation: scroll 3s cubic-bezier(0.19, 1, 0.22, 1) infinite;
33}
34
35@keyframes scroll {
36  0% {
37    transform: translateY(0px);
38  }
39  50%, 100% {
40    transform: translateY(270px);
41  } 
42}