CSSアニメーションでつくるパラパラ漫画アニメーション

カテゴリ

学生の時にノートの端に描いていたパラパラ漫画は、時を経てデジタルなWebサイトで表現できるようになりました。ガラケーやIEで活躍していたGIFアニメーションより表現豊かになったパラパラ漫画風の動きを、今回はCSSアニメーションで再現したものをご紹介します。

パラパラ漫画アニメーションに必要となるCSSプロパティ

今回使用する上で特に重要となってくるCSSプロパティについてご説明します。

animation

HTMLで記載した画像やテキストに対してアニメーションを与えることができるCSSプロパティです。時間や速度を設定できます。

@keyframes

animationプロパティで設定するanimation-nameプロパティと同一の名前を設定された場合に使用できます。位置指定や回転などを設定できます。

steps(animation-timing-function)

stepsはCSSのプロパティであるanimation-timing-functionの値の一つで、animationプロパティ内で使用します。連続して行う動作の各段階の数値の設定ができます。

ease ゆっくり始まって、ゆっくり終わる
ease-in ゆっくり始まる
ease-out ゆっくり終わる
ease-in-out easeよりさらにゆっくり始まって、ゆっくり終わる
linear 一定の速度で始まって終わる

実装の前に用意するもの

アニメーション画像(スプライト画像)の作成

実装の前にアニメーションの動きを考え、それに対して画像を作成する必要があります。

  • アニメーション画像(スプライト画像)- PNG形式、SVGファイル 推奨
  • HTML
  • CSS
スプライト画像の作成例
スプライト画像の作成例

実装方法

実際に作ってみましょう。

HTML

<div class="parapara">

CSS

.parapara {
  width: 80px;
  height: 120px;
  background: url(画像パス) no-repeat;
  animation: parapara 3.0s steps(10) infinite;
}
@keyframes parapara {
  to {
    background-position: -(画像最大幅)px 0;
  }
}

GIFアニメーションとの違い

GIFアニメーションとの違い

前述の通り、小さいアニメーションにはGIF形式の画像が使われていました。レスポンシブやRetinaディスプレイの需要の増加により画像の荒が目立つようになってしまったため、今までより解像度が高く透過が使える形式が求められるようになりました。

GIF形式は画像内でアニメーションの設定が完結していました。CSSアニメーションは画像とCSSで別のファイルでの設定となるため、秒数や動きを指定するのに画像ソフトを起動しなくてもいいことが作業者には嬉しいです。なおかつCSS一つで速度の変更と動きの操作ができるため、GIFアニメーションよりも多様な表現方法を実装することが可能です。

楽しい小さなアニメーションはどこに

今回のカクカクとしたアニメーションは、クリック率を上げるというよりも、場を盛り上げる・華やかにする、デザインの表現を豊かに見せるもの。ページの構成上、アニメーションは必須ではない補助的機能になります。 しかし、アニメーションの設置により印象に残るサイトになります。「コレが動いたらかわいいかもしれない」「ちょっと動かせそう」という理由で手軽に実装してみても良いかもしれません。

ただ一画面内すべてのアイコンにアニメーションが付いてしまうと、目移りがひどく本来のコンテンツ内容が伝わらない可能性があります。ホバーやスクロールした時など、動作に対してアニメーションが稼働すると魅力的でしょう。

細かいイラストやアイコンが散りばめられたアニメーションは子供向けサイトに向いています。

おわりに

CSSを用いたアニメーションの表現方法の一つとしてパラパラ漫画アニメーションを紹介しました。

ファーストビューやキービジュアルなどデザインの要となるものでもなければ、アニメーションはデザイナーから指示があることはあまりありません。加えてCSSアニメーションはコーディングにおいて必須スキルでもないと思っています。ただ、Webサイトだからこそできるデザイン表現としてはとても有能なものだとも思っています。本記事がCSSアニメーションの実装方法のひとつとして参考になれば幸いです。

Share on

お問い合わせはこちら

クーシーのWeb制作実績

すべての制作実績をみる

HTML/CSSコーディングに役立つ記事はこちら

カテゴリ一覧

COOSY BLOG TOP