<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<style>@charset "utf-8";
/*========= レイアウトのためのCSS ===============*/
.wrapper {
text-align: center;
padding: 0 0 100px 0;
}
p {
text-align: center;
padding: 20px 0;
font-size: clamp(1rem, 2vw, 1.5rem);
color: #333;
white-space: nowrap;
font-weight: bold;
}
.steps {
margin: 0 auto;
}
/*=============== 画面が読み込まれるとpng画像がループして動く =================*/
.steps {
width: 100px; /*1フレーム分の横幅*/
height: 100px; /*1フレーム分の縦幅*/
background: url("/wp-content/uploads/demos/_assets/steps.png") no-repeat; /*背景画像の読み込み*/
animation: stepsline 1s steps(5) infinite;
/*stepsline→アニメーション名
1s→アニメーションをする時間
step→（）の中には、1フレーム分最後に余白を持たせてループをさせたいので、アニメーション制作コマ数+1の値を入れる（例：4コマ+1コマ=5コマ）
infinite→無限ループ*/
}
@keyframes stepsline {
0% {
background-position: 0 0;
}
100% {
background-position: -500px 0; /*1フレーム分最後に余白を持たせてループをさせたいので、アニメーション制作コマ数から1コマ分足した横幅（今回は1フレーム100pxで制作しているので全体の400px+100px=500px⇒-500px）を指定。*/
}
}</style>
</head>
<body>
<body>
<div class="wrapper">
<p>画面が読み込まれるとpng画像がループして動く</p>
<div class="steps">
</div>
</div>
<!--/wrapper-->
<script>
</script>
</body>
</html>