webクリエイターボックスさんの記事を参考にして、筋トレ
（腕立てふせ）をアニメーションにしてみました。
イラストレーターで描いたイラストをSVG形式で保存
腕を曲げる前と、曲げた後の動きをひとつの画像ファイルとして用意します。
HTMLとCSSを実装
pushupクラスに画像を埋め込んで、動かしていきます。
<h1>WORK OUT</h1><divclass="viewContainer"><divclass="pushup"></div></div>CSSで画像の配置と、アニメーションの動作を記述します。
/* push up */.pushup{background:url(../images/person/pushUpMan.svg)no-repeat;width:360px;height:173px;animation:play1ssteps(2)infinite}@keyframesplay{to{background-position:-840px0;}}アニメーションの動き
animationの1sは、アニメーションの動作時間（秒）を表しています。step(2)は、2段階を繰り返すという意味です。
animation:play1s（※時間）steps(2)（※コマ数）infiniteコマ数を増やせば、それだけ滑らかなアニメーションを作ることが可能です。
最後にinfiniteを指定すると、動作が無限ループになります。
background-position: -840px 0;
keyframes内で1秒ごとに背景を指定の数値分だけx軸でズラす事で、あたかも動きがあるように見せています。
デモ
実行結果がこちらです。
デモサイト