BLOG

【コピペでOK】イメージ別!サイトをリッチに見せるためのCSSアニメーションまとめ【デモ・サンプルコード付き】

2021/01/07

【コピペでOK】イメージ別!サイトをリッチに見せるためのCSSアニメーションまとめ【デモ・サンプルコード付き】
最近ではアニメーションが実装されたWebサイトも多くなり、趣向を凝らしたリッチな演出を取り入れているサイトもそう珍しくなくなってきました。
特に重要な要素を動かすことで興味を引かせたり、飽きずに読み進めてもらうためのきっかけになったり、といったメリットがありますよね。

ただ、アニメーションのイメージはなかなか文面でも口頭でも伝えにくいもの。
「ふわふわ」「しゅっと」「するする」「ぬるっ」などとオノマトペを駆使して説明しても、ディレクターとコーダーの間の認識の共有は結構難しいのです。
結局、イメージに合った動きをしているサイトを見つけて「この動きで!」と伝えるのが楽なんですよね。

そこで本記事では、そういった言葉にしにくい部分にフォーカスを当てて、シンプル・綺麗、ポップ、スタイリッシュ、柔らかい印象などのイメージ別にCSSアニメーションをご紹介します。
デモ・サンプルコード付きですので、ぜひイメージ通りのアニメーションを探してご活用ください。

また、BRISKブログにはCSSアニメーションだけでなく様々なアニメーションの記事がありますので、最後の項目でそちらもご紹介いたします。

■2021/11/26 追記
ホバーアニメーションの記事を作成しました。
ぜひこちらもご覧ください!
サイトを印象的に!
ホバーアニメーションまとめ

【もくじ】

  1. シンプル・分かりやすい・綺麗
    1. フェードイン
    2. スライドイン
    3. ズームイン
  2. ポップ・勢いがいい
    1. ぽよよんと跳ねる
    2. ななめから出てくる
    3. ポップアップ
    4. ぽよぽよ収縮する
  3. スタイリッシュ・かっこいい・スピーディー
    1. きらんと光る
    2. 背景色が流れてくる
    3. 文字がぬるりと現れる
    4. 背景色が消えてから表示される
    5. 線が伸びる
  4. かわいい・柔らかい
    1. フェードアップ
    2. ボーダーが緩やかにつく
    3. 文字が滑らかに表示される
    4. ゆったりスクロールボタン
    5. ふわふわ揺れる
    6. くるくる回りながら出現
  5. 【BRISKブログ】アニメーション記事の紹介
    1. テキストアニメーションで魅せる
    2. SVGを動かす
    3. APNGで動きをつける
    4. Lottieで高度なアニメーションをつける
    5. ページ遷移をおしゃれに
  6. 最後に

以下のHTML・CSSをベースに、CSSアニメーションをつけていきます。
ベースのHTML・CSSを使用しない場合もありますので、その場合はサンプルコードにHTML・CSSを一緒に記述します。
また、サンプルコードにはベンダープレフィックスをつけませんので、必要に応じて適宜つけてください。

すべてのアニメーションを一覧で見れるデモサイトを用意しましたので、こちらもぜひご覧ください。
デモサイト

また、下記の記事を参考にデモサイトではスクロール(.is-animatedが付与されたタイミング)でアニメーションが発動するようにしています。
下記の記事もご覧ください。
JavaScript(jQuery)でスクロール連動型アニメーションを自作する方法

シンプル・分かりやすい・綺麗

シンプル・分かりやすい・綺麗で、スタンダードなアニメーションをご紹介します。
コーポレートサイトやサービスサイトなど、汎用的に使えるアニメーションのサイトをピックアップしました。

フェードイン

スライドイン

ズームイン

おなじみのフェードイン・スライドイン・ズームインの紹介でした。
組み合わせてみるなど、カスタマイズもいろいろできそうです。
transform: translateX(〇〇px); の値を変えて、上から浮き上がってくるふうにしてみたりなどもできます。

ポップ・勢いがいい

ポップで、勢いがいいアニメーションをご紹介します。
ポップで明るいサイトや、子ども向けコンテンツにぴったりです。

ぽよよんと跳ねる

こちらは上述のスライドインに、ぽよよんと跳ねる動作を加えたものです。
スライドインせずにその場でぽよよんとしたり、ホバーで跳ねたりするのもよいと思います。

ぽよよんと跳ねる2

こちらは揺れながら表示されます。

ぽよよんと跳ねる3

一定間隔でゼリーのようにぷるぷる揺れています。

Bounce.js

こちらはBounce.jsという、たくさん用意されたアニメーションプリセットの数値をいじってカスタマイズしてから、CSSをエクスポートできる素敵なサイトです。
秒数や、跳ねる回数などを調整することができます。こちらも是非覗いてみてください。
Bounce.js

ななめから出てくる

勢いよく右下からスライドインしてきます。
同じ要素が複数並ぶコンテンツで、出てくる方向を変えて左右交互に表示されていく、なんてこともできます。

ポップアップ

スライドアップしながらフェードインします。
モーダルやポップアップウィンドウが開くときのアニメーションに使えそうです。

ぽよぽよ収縮する

鼓動のような収縮を繰り返すアニメーションです。ボタンやリンク画像にこんな感じのアニメーションがついていたら目立ちますね。

スタイリッシュ・かっこいい・スピーディー

スタイリッシュでかっこいい印象のアニメーションをご紹介します。

きらんと光る

ホバーすると要素がきらんと光るアニメーションです。
光る速度を変えてみたり、opacityで光の濃さを調節してみてください。

背景色が流れてくる

背景色が左から右に表示されていきます。
アニメーション後の見た目は、マーカーやマスキングテープのような感じです。

文字がぬるりと現れる

テキストが下から出現します。
テキストのエリアにoverflow: hidden; がかかっていて、隠れているテキストがだんだん浮き上がってくるように見えます。

背景色が消えてから表示される

まずテキストにかぶるように背景色が下からスライドインし、アウトしていくときにテキストが表示されます。

線が伸びる

線が広がっていくだけですが、かっこいい印象です。
フェードインを足したりスピードを緩やかにすると、優しい印象になります。

かわいい・柔らかい

かわいい・柔らかいといった印象のアニメーションをご紹介します。
女性を主なターゲットとする美容系のサイトや、幼いお子さんがいるお母さん向けのサイトで、穏やかな雰囲気を出すのに役立つと思います。

フェードアップ

前述のフェードインとスライドインを組み合わせたものです。
スピードを遅くするとゆったりした優しい雰囲気になります。

ボーダーが緩やかにつく

ボックスの周りにボーダーがゆっくりつきます。
細さや位置などを変えてみてください。

文字が滑らかに表示される

clip-pathを使用したアニメーションです。
IEではclip-pathは非対応なため、アニメーションはせず最初から表示された状態になります。

ゆったりスクロールボタン

スクロールを促すボタンのアニメーションです。
80%でアニメーションを止め、80%~100%の区間はアニメーションを行わない余白になっています。
余白を増やしたり、スピードを早くしたりすることで、もっと違う印象のアニメーションになると思います。

ふわふわ揺れる

リンゴのアイコンをふわふわと揺らしました。
左右にゆらゆらと揺れてかわいい印象です。

くるくる回りながら出現

要素が回転しながら下から浮き上がって表示されます。

【BRISKブログ】アニメーション記事の紹介

BRISKブログから、アニメーションについて書かれた記事をご紹介します。
CSSアニメーションだけでなく、画像を使ったり、jsのフレームワークを使用したアニメーションの記事もありますのでぜひご覧ください。

テキストアニメーションで魅せる

jQueryとCSSを使ったかっこいいテキストアニメーションの記事です。
テキストが一文字ずつスライドインしていき、背景色と文字が被ると色が変わります。
詳しい実装方法や、デモも掲載されているほか、サンプルソースが配布されていますので、ぜひ参考にしてみてください。
テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション

SVGを動かす

SVGを使ったアニメーションの記事です。
ロゴが線を描きながら表示されたり、アイコンが動いていたらとても印象的です。
詳しい作成方法とデモが掲載されていますので、ぜひ参考にしてみてください。
SVGを動かす [cssアニメーション/クリッピングマスク/波/線を描く]

APNGで動きをつける

APNGについての記事です。
APNGとは、「アニメーションするPNG画像」のことです。
パーツごとに動かしたり、CSSアニメーションよりもかなり細かくアニメーションをつけることができます。
IEやEdgeではサポートされていませんが、サポート外の環境下ではAPNGの1フレーム目が表示されるので、見えなくなってしまうということはありません。
記事ではAPNGの作り方が詳細に載っていますので、ぜひ参考にしてみてください。
APNGでイラストやアイコンを動かそう!~AdobeAnimateの使い方~

Lottieで高度なアニメーションをつける

Lottieというライブラリを使ったアニメーションをつける方法の記事です。
APNGやGIFアニメは非対応ブラウザがあったり、再現不可能なことがあったりしますので、どのブラウザでも自由なアニメーションをさせたいという場合はこちらがおすすめです。
また、After Effectsを使用するため、より高度なアニメーションをつけることも可能です。非常に軽量であるというメリットもあります。
可愛らしいデモや詳細な手順などが掲載されていますので、ぜひこちらも参考にしてみてください。
【Bodymovin】リッチなアニメーションをWebサイトで動かしてみよう!【After Effects】

ページ遷移をおしゃれに

おしゃれなページ遷移の記事です。
こちらはNuxt.jsというJavaScriptライブラリのフレームワークを使用して、SPA(シングルページアプリケーション)を実装する記事です。
実装方法や、素敵なデモが掲載されていますので、ぜひご覧ください。
【Nuxt.js】SPAで作るお洒落なページ遷移

最後に

イメージ通りのアニメーションは見つけられましたか?
サンプルコードは、よりイメージに近いものになるようにアレンジを加えてみてください。

また、アニメーションはWebサイトをリッチに見せるのに効果的ですが、付けすぎには注意が必要です。
「サイトが見やすいように」を前提に、アニメーションを付けましょう。

本記事のサンプルや参考のBRISKブログが、サイト制作のお役に立てれば幸いです!
ユーザーを飽きさせない・興味を引くサイト作りに励みましょう!

FOLLOW US