cssのanimationを使ったGIFアニメのようなSVGのパラパラ漫画を作りたい!

css

CSSで作るレスポンシブ対応のスプライトアニメーション

やりたいこと

・JavaScriptは使わず、cssのanimationを使った簡単なアニメーション
・レスポンシブ対応
・拡大しても画質が変わらないSVGでイラストを作成
・複数の画像を1枚にまとめたスプライト画像を使用

SAMPLE

photoshopで作成してSVG形式で書き出し!イラストを準備

PNGやGIFではなく、画像を大きくしても画質が変わらない、しかも軽量なSVGにしました!

photoshopでSVGファイルを作成しました。
シェイプで描画して、SVGで書き出しします。メニューの「ファイル」→「書き出し」→「書き出し形式」でSVGを選択します。

今回は4コマ。これでアニメーションを作っていきます。

htmlに背景画像として配置する

まずhtmlに下記のコードを書きます。
一例

<div class="flipbook"></div>

 

cssに記述①animation設定

animationの設定です。レスポンシブにしたいのでサイズを%で指定しました。
一例

.flipbook{position:relative;width:100%;max-width:500px;overflow: hidden;}
.flipbook:after{
  content: "";
  display: block;
  padding-top: 100%;/*高さを確保*/
}
.flipbook:before{content: '';animation: flipbook_anime 1s steps(4) infinite; 
position:absolute;top:0;left: 0;background-image: url("images/anime.svg"); display: inline-block;vertical-align: 
middle;width:100%;height:100%; background-repeat: no-repeat;background-position:0 0; 
background-size: 400% auto;/*4コマなので400%*/}

 

padding-topでabsoluteにした画像の高さを設定します。
縦÷横×100で計算、今回width、heightが同じ長さなので:afterのpadding-topを100%にしました。
もし縦:横が1:2なら1÷2×100でpadding-topが50%になります。

cssに記述②キーフレーム background-positionの%指定

cssにbackground-positionのキーフレームを書きます。
一例

@keyframes flipbook_anime {
from { 
    background-position:0; 
  }
  to { 
    background-position:133.33333%; 
  }
}

 

background-positionの数値の計算はこちらを参考にさせていただきました。

    (コンテナーの幅 – 画像の幅) * (position x%) = (x オフセット値)

今回の場合、上の式に当てはめると、

1コマ分の表示幅100%(コンテナーの幅)- 400%(画像の幅) * background-positionの値 = -400%(x オフセット値) 

となるため計算すると133.33333…%になります。

ありがとうございます!!

SAMPLE

こちらは6コマでリンゴを回転させています。

CSS

.apple{position:relative;width:100%;max-width:500px;}
.apple:after{
  content: "";
  display: block;
  padding-top: 100%;
}
.apple:before{content: '';animation: apple_anime 4s steps(6) infinite; 
position:absolute;top:0;left: 0;background-image: url("images/parapara03.svg"); display: inline-block;vertical-align: middle;
width:100%;height:100%; background-repeat: no-repeat;background-position:0 0; 
background-size: 600% auto;/*6コマ分で600%*/}

@keyframes apple_anime {
from { 
    background-position:0; 
  }
  to { 
    background-position:120%; 
  }
}

 

レスポンシブではない場合のCSSスプライトアニメーション

こちらは上のSAMPLEと同じリンゴのアニメーションで、サイズが200px×200pxです。小さいサイズのアニメーションなら、スマホ対応しなくてOKなので、長さをpxで設定できて楽ですね!

CSS

.apple02{position:relative;width:100%;max-width:500px;}
.apple02:after{
  content: "";
  display: block;
  padding-top: 200px;/*画像の高さ(px)*/
}
.apple02:before{content: '';animation: apple_anime02 4s steps(6) infinite;
position:absolute;top:0;left: 0;background-image: url("images/parapara03.svg");display: inline-block;vertical-align: middle;
width:200px;height:200px;background-repeat: no-repeat;background-position:0 0;
background-size: 1200px 200px;/*画像のサイズ(px)*/}
@keyframes apple_anime02 {
from { 
    background-position:0; 
  }
  to { 
    background-position:-1200px;/*画像の長さ(px)*/
  }
}

 

-css

関連記事

CSS Animationでアニメーションを表現する

JavaScriptを使わずにCSSだけでアニメーションを表現!CSS Animationキーフレームは0%(アニメーションの開始)から100%(終わり)まで細かく指定できます。

テキストに縁や影をつける

cssでテキストに縁や影をつけます。

疑似要素を使ってアイコンをつけたい!アイコン画像を左右反転させたい!

疑似要素「:before」で要素の先頭に子要素のアイコンをつける 「:before」だと要素の先頭に子要素、「:after」だと要素の最後に子要素がつけられます。 テキストの前にアイコンをつける co …

横並びのデザインをもっと自由に!フレックスボックスレイアウト

子要素のレイアウトを指定する ナビゲーションメニューやページネーション、並列のレイアウト等に欠かせないフレックスボックスレイアウトについてまとめてみました! 横の配置をデザインする「justify-c …

cssで作るいろいろなグラデーション

鮮やかなグラデーションを取り入れたサイトをよく見ます。 様々なタイプのグラデーション記述方法をまとめてみました! グラデーションの種類 基本 グラデーションはbackgroundで指定します。先に書い …