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

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

/* 上の矢印 */
.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;
}
}