こういう動き↓をしたく（ふわっと表示させたくない）、
いろいろ調べて下記に辿り着きました。
▼HTML
<div class=”arrow”>
<img src=”画像のリンク/arrow.png”>
<img src=”画像のリンク/arrow.png”>
<img src=“画像のリンク/arrow.png”>
</div>
▼CSS
.arrow img:nth-child(1) {
animation: arrow-move1 2s step-end infinite;
}
→ animation: [アニメーションの名前を任意で] [秒数] [一瞬で変化させる] [繰り返し]
.arrow img:nth-child(2) {
animation: arrow-move2 2s step-end infinite;
}
.arrow img:nth-child(3) {
animation: arrow-move3 2s step-end infinite;
}
@keyframes arrow-move1 {
0%{opacity: 0;}
25%{opacity: 1;}
50%{opacity: 1;}
75%{opacity: 1;}
}
@keyframes arrow-move2 {
0%{opacity: 0;}
25%{opacity: 0;}
50%{opacity: 1;}
75%{opacity: 1;}
}
@keyframes arrow-move3 {
0%{opacity: 0;}
25%{opacity: 0;}
50%{opacity: 0;}
75%{opacity: 1;}
}
animationの動きについてはこちらを参考にさせていただきました。
www.flapism.jp/html/416/
アニメーションで表示だと基本ふわっとフェードインする形になってしまうので
調べるのにだいぶ苦労しました。