シンプルウェイ制作班|WEB制作スタッフブログ

GIFじゃなくてもアニメーションができる!CSS3のキーフレームを使ったコマ送りアニメーション

2014年09月16日

こんにちは。デザイナーの@です。

WEBサイトを作る際、ちょっとしたアニメーションにGIFアニメを利用すると面白い効果ができたりしますよね。
ただ、gifはjpgやpngに比べると使える色が限られるため画質の劣化が目立つのも気になる…ということで、CSS3のキーフレームを利用してコマ送りのアニメーションを試してみました!


.tsukubach-animation {overflow: hidden;width: 256px;height: 256px;background: url(http://img01.tsukuba.ch/usr/t/e/c/tech/20140916_2.png) no-repeat;-webkit-animation: jump 2s steps(23, end) infinite;animation: jump 2s steps(23, end) infinite;}@-webkit-keyframes jump {0% {background-position: 0 0;}100% {background-position: 0 -5888px;}}@keyframes jump {0% {background-position: 0 0;}100% {background-position: 0 -5888px;}}

左図のような1コマ1コマを繋げた画像を用意して、background-positionをずらして表示すると、コマ送りのアニメーションになります。

※background-positionの指定はパーセンテージだと上手く動かないようです。

魅力は何と言っても背景を綺麗に透過したPNG-24形式のファイルも、jpgも、svgもアニメーションに使えること!
頑張ってWEBサイトで魅力的に使いたい~ハート


writer : @

同じカテゴリー(CSS)の記事画像
世界各国のwebデザイン~バレエ団編~
サイトにひと手間!CSS3アニメーション
Webフォントを使ってみませんか
英数字で途中改行するスタイル
同じカテゴリー(CSS)の記事
 世界各国のwebデザイン~バレエ団編~ (2016-03-28 15:58)
 text-shadowを使ってテキストを装飾 (2015-08-24 13:49)
 三角形の作り方 (2015-04-21 08:11)
 transformで回転したとき、ジャギるのを直す方法 (2014-09-01 12:12)
 サイトにひと手間!CSS3アニメーション (2014-02-17 18:18)
 Webフォントを使ってみませんか (2011-09-06 16:21)
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。

コメントフォーム

名前:
メール:
URL:
コメント:
上の画像に書かれている文字を入力して下さい

<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

過去記事
最近のコメント
QRコード
QRCODE
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 2人
新規投稿

新規投稿するにはログインする必要があります。会員IDをお持ちでない方はIDを取得された後に投稿できるようになります。

このページの先頭へ