2つの矢印が繰り返し動くアニメーションをCSSで作ってみた

※当サイトにはプロモーションが含まれています。

前回、Photoshopを使って、このようなGIFアニメーションの矢印を作りました。

photoshopを使って３分で作れる矢印のGIFアニメーションの作り方
https://best-item.work/photoshop/arrow-gif/
最近は見かけなくなりましたが、以前は、CTA（Call To Action）のボタンの上に動きのある矢印のアニメーションが、ランディングページやセールスページによく使われていました。このような矢印のアニメーションです。 …

今回は、2つの矢印が繰り返し動くアニメーションをCSSで作ってみました。

繰り返し動く矢印アニメーションのCSS

繰り返し動く矢印アニメーションのHTMLとCSSです。

HTML

<div class="triangle-down-one"></div>
<div class="triangle-down-two"></div>

CSS

/* 上の矢印 */
.triangle-down-one {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 35px solid #ee0000;
position: relative;
animation: moveDownOne 1s infinite;
margin: 0 auto 10px;
}
@keyframes moveDownOne {
0% {
top: 0;
opacity: 1;
}
70% {
top: 15px;
opacity: 1;
}
80% {
top: 15px;
opacity: 0;
}
100% {
top: 0;
opacity: 0;
}
0% {
top: 0;
opacity: 1;
}
}

/* 下の矢印 */
.triangle-down-two {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 45px solid #dd0000;
position: relative;
animation: moveDownTwo 1s infinite;
animation-delay: 0.2s; /* 遅延処理 */
margin: 0 auto;
}
@keyframes moveDownTwo {
0% {
top: 0;
opacity: 1;
}
70% {
top: 15px;
opacity: 1;
}
80% {
top: 15px;
opacity: 0;
}
100% {
top: 0;
opacity: 0;
}
0% {
top: 0;
opacity: 1;
}
}

これを適用すると、こんな感じになります。

どうでしょう？

本当は、三角形を3つ並べたかったのですが、調整が面倒だったので諦めました･･･。