メディアクエリで細かく数値を指定したり、％やemなどの指定を試していたときに、下記のサイト（現在は閉鎖）の存在を知りました。

まさに探していたものとドンピシャだったのですが、数値の指定など少しだけわかりにくい部分があったので補足したいと思います。

See the Pen CSS : sprite-anime by Yurie (@kkrg) on CodePen.

準備するのはスプライト画像のみです。

普通にアニメーションさせるのであれば、縦幅をheightで指定するところを、今回はpadding-topを使って指定していきます。スプライト画像は縦位置で作成すると使いやすいです。

htmlは、divひとつあればOKです。

<div class="anime"></div>

CSSは次のように記載していきます。

.anime {
    margin: 20px auto;
    max-width: 320px; /* 横幅の最大値 */
    overflow: hidden; /* 余分な要素を隠す */
    transform: translate3d(0, 0, 0); /* animationの初期値 */
    position: relative; /* :before の基準値 */
}

.anime:before {
    content: '';
    display: block;
    background: url(画像URL) no-repeat 0 0;
    background-size: contain;
    padding-top: 243.75%; /* 画像の縦幅 */
    animation: sprite-anime 3s steps(4) infinite; /* アニメーション設定 */
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.anime:after {
    content: '';
    display: block;
    padding-top: 60.9375%; /* 見た目上の高さ */
}

@keyframes sprite-anime {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, -100%);
    }
}

今回のアニメーション領域は、横幅320px_縦幅195pxとしています。

これを踏まえて、コード上にも補足をいれていますが.animeで横幅指定と表示領域を作り、:beforeでアニメーションを、:afterで高さを確保しています。

:before:afterのpadding-topについては、下記のようにそれぞれ算出しています（よく使う背景画像を縦横比を維持したままレスポンシブ対応する時に使うやつです）。