CSSスプライトとstepsを使って筋トレをしてみた

3867 ワード
CSS アニメーション CSS テキストリンク

webクリエイターボックスさんの記事を参考にして、筋トレ（腕立てふせ）をアニメーションにしてみました。

イラストレーターで描いたイラストをSVG形式で保存

腕を曲げる前と、曲げた後の動きをひとつの画像ファイルとして用意します。

HTMLとCSSを実装

pushupクラスに画像を埋め込んで、動かしていきます。

<h1>WORK OUT</h1>
      <div class="viewContainer">

          <div class="pushup"></div>

      </div>

CSSで画像の配置と、アニメーションの動作を記述します。

/* push up */
.pushup {
  background: url(../images/person/pushUpMan.svg) no-repeat;
  width: 360px;
  height: 173px;
  animation: play 1s steps(2) infinite
}

@keyframes play {
  to {
    background-position: -840px 0;
  }
}

アニメーションの動き

animationの1sは、アニメーションの動作時間（秒）を表しています。
step(2)は、2段階を繰り返すという意味です。

animation: play 1s（※時間） steps(2)（※コマ数） infinite

コマ数を増やせば、それだけ滑らかなアニメーションを作ることが可能です。
最後にinfiniteを指定すると、動作が無限ループになります。

background-position: -840px 0;

keyframes内で1秒ごとに背景を指定の数値分だけx軸でズラす事で、あたかも動きがあるように見せています。

デモ

実行結果がこちらです。
デモサイト

参考

CSSスプライトとstepsを使ってアニメーション画像を作ろう
codepen