CSSでスプライトアニメーション制御

この記事はCommune Advent Calendar 2024シリーズ2 15日目の記事です。

gifは良い。簡単にアニメーションを貼れるから。

でも、webブラウザ上で、「もうちょっと早くしたいんだよなー」とか、「途中で一時停止したいんだよなー」といったケースで困る。
柔軟に制御するためにはスプライトアニメーション方式にしよう。

1. スプライトシートを用意する

こんな感じの1枚の画像を作る。
git2sprite sheetならばググるといろいろ出てくるはずです。

2. Scriptを書く

ポイントはCSS

.pio {
  --h: 128px;
  --w: 128px;
  --frame-count: 5;
  background: url(...) 0 0 no-repeat;
  width: var(--w);
  height: var(--h);
  animation: pioAnim var(--speed) steps(var(--frame-count), end) infinite;
}

@keyframes pioAnim {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: calc(-1 * var(--w) * var(--frame-count)) 0;
  }
}

こんな感じです。
スプライトアニメーション自体は古くから存在するテクニックですが、CSS AnimationやCSS Custom Propertyがある現代ではとてもきれいに扱うことができるようになりました。

画像提供

ぴよたそ
https://hiyokoyarou.com/