Mill's Note
  1. HOME
  2. CSS
  3. CSS小技
  4. cssだけで作るscrollを促す矢印(コピペOK)

【CSS小技】cssだけで作るscrollを促す矢印(コピペOK)

/

LPのファーストビューなどでまれに見かける「scrollを促す下矢印のアニメーション」。

cssだけで作るので、バランスやサイズを変えるのも簡単。ちょっと変えながら使い回したいときなどにお勧めです。

画像を使ったり、クリッピングマスクにしたり、やり方は色々ありますが、、

縦線の長さだけなど縦横比を変えたい時は作り直し。
縦横比そのままでもサイズを変えると線の幅が変わってしまう > <

１回こっきりとか変更無しなら良いのですが、使い回すにはちょっと。。って事ありますよね

画像+cssで作るタイプはこちら ▶

CSSだけで作る矢印アニメーション 【デモ&コード】

正直、画像でマスクかけて背景動かした方がスムーズだし、コードもシンプルにいけます。
画像作成を厭わなければその方がお勧め、かも ^^;

使い回すなら、class かけて一部のオーバライドだけで変更できるこちらの css設定の方がラクチンかも^^

矢印アニメーションのコード
HTML code
<div class="arrow1"><span></span></div>
CSS code
.arrow1 {
  position: relative;
  height: 140px;      /* 出来上がりの高さ */
  display: inline-block;
}
.arrow1::before {     /* 下の矢印部分 */
  content: "";
  position: absolute;
  top: 100%;
  left: 1px;          /* 縦線が中央に来るよう [縦線の幅/2] を指定 */
  aspect-ratio: 1 / 1;
  height: 15%;       /* ∨ の高さ */
  transform-origin: bottom left;
  transform: translateY(-100%) rotate(-45deg);
  border-bottom: solid 2px #000; /* ∨ の線幅と色 */
  border-left: solid 2px #000;   /* ∨ の線幅と色 */
  opacity: 0;
  animation: arrow12 6s linear infinite;
}
.arrow1 span {        /*  縦線  */
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 2px;               /* 縦線の幅 */
  height: calc(100% - 2px); /* 縦線の長さ(下がはみ出さないよう線幅分減らす) */
  overflow: hidden;
}
.arrow1 span::before {      /* ここを動かして縦線色を変化 */
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  transform: translateY(-100%);
  background-color: #000;
  animation: arrow11 6s linear infinite;
}
@keyframes arrow11 {
  0%   { opacity: 0; transform: translateY(-100%); }
  20%  { opacity: 1; transform: translateY(0); }
  45%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(100%); }
  80%  { opacity: 0; transform: translateY(100%); }
  100% { opacity: 0; transform: translateY(100%); }
}
@keyframes arrow12 {
  0%   {opacity: 0; }
  15%  {opacity: 0; }
  40%  {opacity: 1; }
  65%  {opacity: 1; }
  75%  {opacity: 0; }
  100% {opacity: 0; }
}
CSS animation の説明はこちら

コードの説明

アニメーションは、縦と矢印部分を別個に動かしています。
タイミングや動きは、色々調整してみてください。

セレクタ説明
.arrow1ここで高さを指定。他の要素とのからみがあるなら margin 等で調整します
.arrow1::before (arrow12)下の矢印部分。高さは .arrow1 に対する% か px で指定
45度回転してますので、幅が [ 指定height×1.41…]、高さは幅の1/2になります
.arrow1 span縦線部分。幅は下矢印の線幅と合わせてください
.arrow1 span::before (arrow11)これが動いてアニメーションします
@keyframes arrow11縦線のアニメーション用設定
@keyframes arrow12矢印部分のアニメーション用設定
タイミングを5%づつ早める事で縦線アニメとのずれを減らしています