CSS:レスポンシブ対応のCSSスプライトアニメーションを実装する

スプライト画像とCSS(animation: steps)を使用したアニメーションの実装をします。 普通に実装する分には良いのですが、写真の上の任意の位置に配置した時にウィンドウ幅の拡大縮小に合わせて位置や大きさを可変したい、いわゆる「レスポンシブ対応」を行いたいという状況になった時に、padding-topを高さの代わりに用いる方法があったので今回は共有したいと思います。

レスポンシブ対応する

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

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

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

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

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

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

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

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

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:afterpadding-topについては、下記のようにそれぞれ算出しています(よく使う背景画像を縦横比を維持したままレスポンシブ対応する時に使うやつです)。

.anime:before画像サイズ(W320px_H780px)780/320*100% = 243.75%
.anime:afterアニメーション領域(W320px_H195px)195/320*100% = 60.9375%
URLをコピーする