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

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

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

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

今回紹介するアニメーションのほとんどは、CSSのanimationプロパティを利用して設定されていますので、animationプロパティについても簡単に解説していきます。
（中にはtransitionプロパティでアニメーションを設定したものもあります。）

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

【もくじ】

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

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

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

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

【解説】CSS animationの書き方

今回の記事で紹介するアニメーションは、大半がCSSのanimationプロパティを使って書かれています。
animationプロパティの設定について解説していきますので、animationプロパティをあまり使わないという方は是非ご確認ください。

animation: animationName 1s ease 0.5s infinite alternate forwards;
animationは上記のように記述します。
このようにまとめて記述をすることを、ショートハンドと言います。ばらばらにして1つずつ記述することも可能です。
上記をばらすと、以下のようになります。
animation-name: animationName;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;

ばらばらに1つずつ記述するほうがわかりやすいですが、記述がだいぶ長くなってしまいますね。可読性も良くないので、ショートハンドでまとめて書く方がおすすめです。
次からは、各項目について簡単に説明していきます。

animation-name

@keyframes XXX {} で設定したアニメーションの名前を設定します。

animation-duration

アニメーションが始まってから完了するまでの時間を設定します。
アニメーションがループする設定の場合は、設定した秒数が繰り返し再生されます。

設定時は「1s」のように単位の「s（seconds）」または「ms（millisecond）」が必要です。
単位の記述を忘れると無効になってしまうため注意してください。

animation-timing-function

アニメーションが変化する速度（イージング）を設定します。
主な値は以下です。

• ease

  少しゆっくり始まって、少しゆっくりになって終わります。

• ease-in

  ゆっくりと始まり、その後は等速で動きます。

• ease-out

  等速で動き、最後はゆっくりと終わります。

• ease-in-out

  ゆっくり始まって加速し、ゆっくりになって終わります。easeよりもメリハリの効いた動きです。

• linear

  最初から最後まで等速で動きます。

その他にもsteps()でコマ送りアニメーションができます。

また、もっと複雑なイージングを付けたい場合はイージング関数を使ってみましょう。
便利なイージング関数チートシートがあるので、是非活用してみてください。

初期値は「ease」なので、一定速度で動かしたい場合は指定なしではなく「linear」を指定してください。

animation-delay

アニメーションが開始するタイミングを設定します。
正数を設定すると遅らせることができます。
負数を設定した場合は、設定した秒数の分だけ進んだ状態でアニメーションが開始されます。

こちらも設定時は「0.5s」のように単位の「s（seconds）」または「ms（millisecond）」が必要です。
初期値は0で、0sの場合は単に「0」とし、単位は必要ありません。
単位の記述を忘れると無効になってしまったり、animation-iteration-countの値だと捉えられてしまうため、忘れないよう気を付けてください。

animation-iteration-count

アニメーションを何回繰り返すか設定します。
0以上の正数を設定でき、負数は無効となります。
「0.5」や「1.2」のような小数のある値を設定することも可能です。

また、infiniteを設定すると、アニメーションは無限に繰り返されます。

animation-direction

アニメーションの向きを設定します。
主な値は以下です。

• normal

  アニメーションは毎回、順方向に動きます。

• reverse

  アニメーションは毎回、逆方向に動きます。

• alternate

  アニメーションは左右交互に動きます。
  通常なら、左に傾く→右に傾く→左に傾いた状態になる→右に傾く…と、アニメーションの継ぎ目が不自然になってしまいますが、alternateに設定しておくことで滑らかにループします。

• alternate-reverse

  アニメーションは逆方向から始まり、左右交互に動きます。

animation-fill-mode

要素のアニメーションの前後のスタイルを決められます。
主な値は以下です。

• none

  アニメーション前後は、アニメーションで設定されたスタイルを適用しません。

• forwards

  アニメーション後、最後のキーフレームで設定されたスタイルを保ちます。

• backwards

  アニメーション前、最初のキーフレームで設定されたスタイルが当たった状態になっています。アニメーション後は、アニメーションで設定されたスタイルを適用されず、元のスタイルに戻ります。

• both

  forwards・backwardsの両方が適用された状態です。アニメーション前は、最初のキーフレームの状態になり、アニメーション後は最後のキーフレームの状態を保ちます。

• infinite

  forwards・backwardsの両方が適用された状態です。アニメーション前は、最初のキーフレームの状態になり、アニメーション後は最後のキーフレームの状態を保ちます。

初期値は「note」です。
アニメーションが終わったときに、その状態を保ち続けたい場合が多いので、forwardsを指定することが多いです。

参考ドキュメント：animation

それでは、次からはアニメーションをデモ付きで紹介していきます。

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

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

フェードイン

フェードインは、スクロールに合わせて要素が順に出てくるアニメーションや、ページ読み込み時にメインビジュアルの画像やテキストを表示させるアニメーションなど、汎用性が高いです。どんなアニメーションを設定するか迷ったときは、とりあえずフェードインさせておけば間違いありません！

アニメーションの記述は、ショートハンド（複数プロパティをまとめて指定）で書かれていますが、ばらして書くと以下のようになります。

animation: 1fadeIn 20.7s 3cubic-bezier(0.33, 1, 0.68, 1) 4forwards;

• 1アニメーション名　animation-name: fadeIn;
• 2かかる時間　animation-duration: 0.7s;
• 3変化する速度　animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
• 4変化前後のスタイル　forwards;

スライドイン

スライドインも、スクロールに合わせて要素が順に出てくるアニメーションや、メインビジュアルのテキストを横からスライドで表示させるなど使いやすいアニメーションです。
左からスライド・右からスライドと使い分けて、左右から順々に要素が出現するようにもできます。

アニメーションの記述は、ショートハンド（複数プロパティをまとめて指定）で書かれていますが、ばらして書くと以下のようになります。

animation: 1slideIn 21s 3cubic-bezier(0.25, 1, 0.5, 1) 4forwards;

• 1アニメーション名　animation-name: slideIn;
• 2かかる時間　animation-duration: 1s;
• 3変化する速度　animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
• 4変化前後のスタイル　animation-fill-mode: forwards;

ズームイン

ズームインは、目立たせたいボタンやバナーを出現させるために使うと、インパクトがあって目を引きます。
また、メインビジュアルのスライダーの画像を、切り替わるまでの間、ゆっくりとズームさせていくように使うと、スライダーが単調でなくなってリッチな印象になります。

アニメーションの記述は、ショートハンド（複数プロパティをまとめて指定）で書かれていますが、ばらして書くと以下のようになります。

animation: 1zoomIn 20.8s 3cubic-bezier(0.25, 1, 0.5, 1) 4forwards;

• 1アニメーション名　animation-name: zoomIn;
• 2かかる時間　animation-duration: 0.8s;
• 3変化する速度　animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
• 4変化前後のスタイル　animation-fill-mode: forwards;

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

ポップ・勢いがいい

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

ぽよよんと跳ねる

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

スライドインよりももっと勢いのある感じ・ポップな感じを演出したい場合は、このような跳ねるようなアニメーションを付けると効果的です。
跳ねる数を増やして動きを滑らかにしてみてもよいと思います。

アニメーションの記述は、ショートハンド（複数プロパティをまとめて指定）で書かれていますが、ばらして書くと以下のようになります。

animation: 1poyoyon 20.5s 3cubic-bezier(0.12, 0, 0.39, 0) 4forwards;

• 1アニメーション名　animation-name: poyoyon;
• 2かかる時間　animation-duration: 0.5s;
• 3変化する速度　animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
• 4変化前後のスタイル　animation-fill-mode: forwards;

ぽよよんと跳ねる2

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

アイコンをスクロールアニメーションで順に表示させる場合に、揺れながら表示されるとポップで可愛らしい印象になります。

アニメーションの記述は、ショートハンド（複数プロパティをまとめて指定）で書かれていますが、ばらして書くと以下のようになります。

animation: 1poyoyon2 21s 3ease-in-out 4forwards;

• 1アニメーション名　animation-name: poyoyon2;
• 2かかる時間　animation-duration: 1s;
• 3変化する速度　animation-timing-function: ease-in-out;
• 4変化前後のスタイル　animation-fill-mode: forwards;

ぽよよんと跳ねる3

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

目立たせたいバナーやボタンに設定しておくと、要素がぷるぷる揺れ続けるのでよく目立ちます。
元々目立つ要素をより目立たせるために設定するのも、重要だけど小さく設置されている要素を目立たせるために設定するのも、効果的だと思います。

アニメーションの記述は、ショートハンド（複数プロパティをまとめて指定）で書かれていますが、ばらして書くと以下のようになります。

animation: 1poyoyon3 22.5s 3infinite;

• 1アニメーション名　animation-name: poyoyon3;
• 2かかる時間　animation-duration: 2.5s;
• 3アニメーション回数　animation-iteration-count: infinite;

Bounce.js

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

ななめから出てくる

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

スライドインよりももっと勢いのある感じを演出したい場合は、斜めから飛び出てくるようにしてみてください。
躍動感のあるいきいきとした印象になります。

アニメーションの記述は、ショートハンド（複数プロパティをまとめて指定）で書かれていますが、ばらして書くと以下のようになります。

animation: 1slide-skew 20.4s 3cubic-bezier(0.25, 1, 0.5, 1) 4forwards;

• 1アニメーション名　animation-name: slide-skew;
• 2かかる時間　animation-duration: 0.4s;
• 3変化する速度　animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
• 4変化前後のスタイル　animation-fill-mode: forwards;

ポップアップ

スライドアップしながらフェードインします。

モーダルやポップアップウィンドウが開くときのアニメーションに使いやすそうです。
バナーやボタン、CTAエリアを表示させるのに使ってもよく目立つと思います。