ファーストビューの所に設置されていて、上から下に向かって線が動いているのをみたことありませんか？

今回はその要素についてやっています。

イメージがつかない方もいると思うので、先に完成形から。
動作確認(クリックするとページが開きます)

HTML

<div class="scroll">
 <p>scroll</p>
</div>

CSS

 .scroll {
    color         : #333;
    font-size     : 13px;
    writing-mode  : vertical-rl;
    position      : absolute;
    top           : 30%;
    left          : 50%;
    transform     : translateX(-50%) translateY(-50%);
}
.scroll::after {
      content         : '';
      display         : block;
      position        : absolute;
      right           : 50%;
      bottom          : -120px;
      transform       : translateX(-50%);
      width           : 1px;
      height          : 100px;
      background-color: #333;
    }


.scroll::after {
  animation: scroll 3s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

部分毎に見てみよう

まずはHTMLから。

<div class="scroll">
 <p>scroll</p>
</div>

特に変わったことはしていません。
クラス.scrollの中にpタグでscrollという文字を表示させています。

次にCSSです。

 .scroll {
    color         : #333;
    font-size     : 13px;
    writing-mode  : vertical-rl;
    position      : absolute;
    top           : 30%;
    left          : 50%;
    transform     : translateX(-50%) translateY(-50%);
}

最初の部分を抜粋しています。
この中で特殊なものといえば、

writing-mode  : vertical-rl;

上記の記述かと思います。
これは文字を横から縦にしている記述になります。
この記述について詳しく知りたい方はこちら


次に疑似要素部分

.scroll::after {
      content         : '';
      display         : block;
      position        : absolute;
      right           : 50%;
      bottom          : -120px;
      transform       : translateX(-50%);
      width           : 1px;
      height          : 100px;
      background-color: #333;
    }
.scroll::after {
  animation: scroll 3s cubic-bezier(1, 0, 0, 1) infinite;
}

最初の疑似要素::afterで、縦の線を作っています。
2つ目の疑似要素で、最初に作った線をアニメーションさせるためのプロパティを設定しています。

cubic-bezier(1, 0, 0, 1)

この記述は、イージングに関する部分になっています。
理解するのが少し難しいと思いますので、気になる方はこちら


最後にキーフレーム

@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

ココが一番難しいかもしれません。
transform-originは、要素の変形に関係している記述になっています。
これについて知りたい方はこちら

まとめ

よくある表現且つ汎用的ですよね。
CodePenからコードをそのまま引っ張ってくれば使えると思うので、
弄ってみて色々な動きを作ってみるのも面白そうですね。

備忘録としてあげたので説明が不足している部分があると思いますが、
その他参考サイトを閲覧して補っていただけたらと思います。

参考になりましたら、URLをコピーしてシェアお願いいたします！