枠外から中央で一時停止→反対側へ走り去るCSS

この記事は約 2 分で読めます。
\いろいろ応用が効きます/
<div class="car_wrap">
<p class="car">車</p>
</div>
.car_wrap{
height: 50px;
position: relative;
overflow: hidden;
}
.car_wrap .car{
position: absolute;
left: -20%;
animation: carAnime 6s ease-in-out infinite;
}
@keyframes carAnime{
0%{left: -20%;}
30%{left: 47%;}
60%{left: 47%;}
100%{left: 120%;}
}