実装するアニメーション

以下が今回実装するアニメーションです。

scroll

コードを解説

CSSアニメーションでのポイントは以下の2点です。
※詳しいコードはサンプルコードを参照ください。

@keyframes
animationプロパティ

@keyframes

@keyframes kf-arrow-anime {
  0%,
  50%,
  100% {
    transform: translateY(-10%);
  }

  30% {
    transform: none;
  }
}

上下に伸縮するアニメーションを実装しています。

animationプロパティ

animation-name: kf-arrow-anime;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;

infiniteでアニメーションを繰り返し実装しています。こちらを実装したい画像に指定します。

要素の角度を指定

transform: rotate(90deg);

ratate(90deg)を指定することで、要素の角度を変更できます。

以下のように、上記の要素に指定し、テキストを傾け、画像を伸縮しています。特にポイントとなるのは、全体を囲っている要素にoverflow: hidden;を記述している部分です。この指定をしないと、以下のように表示されます。

scroll

下に伸びていることを表現するために、上に伸びている部分を取り除いています。
こちらの実装がお役に立てれば幸いです。