PNGアニメーション（hoverするとpng画像が動く）

<!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 {
  cursor: pointer; /*カーソルを指マークに変更*/
  width: 100px; /*1フレーム分の横幅*/
  height: 100px; /*1フレーム分の縦幅*/
  background: url("/wp-content/uploads/demos/_assets/steps.png") no-repeat; /*背景画像の読み込み*/
}

.steps:hover {
  animation: stepsline 1s steps(3) forwards;
  /*stepsline→アニメーション名
    1s→アニメーションをする時間
    step→（）の中には、アニメーション制作コマ数-1の値を入れる（例：4コマ-1コマ=3コマ）
    forwards→最後の形を維持*/
}

@keyframes stepsline {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -300px 0; /*アニメーション制作コマ数から1コマ分引いた横幅を指定。
（例：今回は1フレーム横幅100pxで制作しているので全体の400px-100px=300px⇒-300px）を指定。*/
  }
}</style>
</head>
<body>
<body>
<div class="wrapper">
<p>hoverするとpng画像が動く<br>※スマートフォンのタッチには非対応</p>
<div class="steps">
</div>
</div>
<!--/wrapper-->
<script>
</script>
</body>
</html>

/* 
   外部依存 CSS:
     - https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
 */

@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 {
  cursor: pointer; /*カーソルを指マークに変更*/
  width: 100px; /*1フレーム分の横幅*/
  height: 100px; /*1フレーム分の縦幅*/
  background: url("/wp-content/uploads/demos/_assets/steps.png") no-repeat; /*背景画像の読み込み*/
}

.steps:hover {
  animation: stepsline 1s steps(3) forwards;
  /*stepsline→アニメーション名
    1s→アニメーションをする時間
    step→（）の中には、アニメーション制作コマ数-1の値を入れる（例：4コマ-1コマ=3コマ）
    forwards→最後の形を維持*/
}

@keyframes stepsline {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -300px 0; /*アニメーション制作コマ数から1コマ分引いた横幅を指定。
（例：今回は1フレーム横幅100pxで制作しているので全体の400px-100px=300px⇒-300px）を指定。*/
  }
}