最近ではアニメーションが実装された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エリアを表示させるのに使ってもよく目立つと思います。

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

animation: 1popup 20.6s 3cubic-bezier(0.22, 1, 0.36, 1) 4forwards;

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

ぽよぽよ収縮する

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

目立たせたいバナーやボタンに、ぽよぽよ動き続けるアニメーションを設定しておくとよく目立ちます。
メインビジュアルに設置されるバナー・ボタンや、画面下に追従する小さなボタンなど、目立たせたいけど大きくできない要素におすすめです。

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

animation: 1poyopoyo 22s 3ease-out 4infinite;

• 1アニメーション名　animation-name: poyopoyo;
• 2かかる時間　animation-duration: 2s;
• 3変化する速度　animation-timing-function: ease-out;
• 4アニメーション回数　animation-iteration-count: infinite;

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

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

きらんと光る

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

ボタンやバナーのホバー効果に使えます。ボタンの色が変わる・バナーが薄くなるよりも動きのあるホバー効果になるので、リッチでかっこいい印象になります。

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

animation: 1kiran 20.5s 3linear;

• 1アニメーション名　animation-name: kiran;
• 2かかる時間　animation-duration: 0.5s;
• 3変化する速度　animation-timing-function: linear;

背景色が流れてくる

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

テキストにアニメーションを付けたいときにぴったりです。メインビジュアルのキャッチコピーや、見出しに使えます。
タイトルや見出しに背景色が引かれたデザインの場合は、このアニメーションを付けるとデザインに沿った雰囲気になりそうです。

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

animation: 1bg 22.6s 3cubic-bezier(0.22, 1, 0.36, 1) 4forwards;

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

文字がぬるりと現れる

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

こちらもメインビジュアルのキャッチコピーや見出しにぴったりです。
背景色を設定する必要がないため、色数の少ないスタイリッシュなデザインのサイトや、それほど目立たなくてもいいタイトルにアニメーションを付けたいときに利用するとよいと思います。

こちらはanimationプロパティではなく、transformとtransitionを使っています。
transform: matrix(); というのはあまり馴染みのない方もいるかもしれません。
matrix()には6つの値を指定します。左から順に、scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() です。
今回は matrix(1, 0, 0, 1, 0, 100) → matrix(1, 0, 0, 1, 0, 0) の設定なので、translateY(100)がtranslateY(0)に移動するアニメーションです。
translateY() で設定するので問題ありませんが、matrixで実装しておくと少し動きに変化を付けたいときに便利です。

参考ドキュメント： matrix()

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

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

こちらもメインビジュアルのキャッチコピーや見出しにぴったりです。
上に色が被さってから無くなるアニメーションなので、デザインに元々背景色が付いていなくても使えます。

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

animation: 1mask-bg 21.2s 3cubic-bezier(0.8, 0, 0.170, 1);

• 1アニメーション名　animation-name: mask-bg;
• 2かかる時間　animation-duration: 1.2s;
• 3変化する速度　animation-timing-function: cubic-bezier(0.8, 0, 0.170, 1);

線が伸びる

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

要素に線が付いたデザインなら、要素自体を非表示→表示にするのではなく、スクロールアニメーションに合わせて線だけを順に表示させるときれいに見えると思います。
また、ローディングアニメーションのプログレスバーにも使えそうです。

こちらはanimationプロパティではなく、transitionを使ってアニメーションさせています。
線の要素に .is-animated が付与されたときに、1.2秒かけて線が0%から100%に伸びていきます。

かわいい・柔らかい

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

フェードアップ

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

フェードインでは印象が薄すぎるけど、スライドインでは動きが激しすぎる……という場合は、こちらを使ってみてください。
優しい雰囲気を保ったまま動きを付けられてリッチに見えます。

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

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

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

ボーダーが緩やかにつく

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

要素に枠線が付いたデザインなら、このような線が伸びるアニメーションを付けておくとメリハリが付くと思います。

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

animation: 1stroke-width 21.8s 3cubic-bezier(0.22, 1, 0.36, 1);
animation: 1stroke-height 21.8s 3cubic-bezier(0.22, 1, 0.36, 1);

• 1アニメーション名　animation-name: stroke-width;
• 1アニメーション名　animation-name: stroke-height;
• 2かかる時間　animation-duration: 1.8s;
• 3変化する速度　animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);

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

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

タイトルや見出しに使いやすいアニメーションです。
派手なアニメーションではありませんが、シンプルでかっこいい印象になります。

こちらはanimationプロパティではなく、transformとtransitionを使っています。
.is-animatedが付与されたときにclip-pathが0になり、文字が表示されます。

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

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

MVが画面いっぱいのデザインの場合、次のコンテンツが見えないため、このページはこれで終わりなのかな……？　と思わせてしまう場合があります。
そんなときは、このようなスクロールを促す要素を置いてみてください。単に「SCROLL」と文字が置いてあるより、矢印や線が下に流れている方がよりわかりやすいです。

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

animation: 1scroll 23.5s 3infinite;

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

ふわふわ揺れる

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

デモはリンゴが1つですが、複数の雲や鳥のイラストをもっとゆっくりとふわふわさせておくと、より優しく可愛らしい雰囲気になると思います。
その際は、イラスト1つ1つのdurationやkeyframesの％を調整して、アニメーションを少しずつずらしてみてください。

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

animation: 1fuwafuwa 23s 3ease-in-out 4infinite 5alternate;

• 1アニメーション名　animation-name: fuwafuwa;
• 2かかる時間　animation-duration: 3s;
• 3変化する速度　animation-timing-function: ease-in-out;
• 4アニメーション回数　animation-iteration-count: infinite;
• 5アニメーション方向　animation-direction: alternate;

くるくる回りながら出現

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

アイコンや「01」等のナンバリングをくるくると表示させてみるとよく目立ちます。
回転中は要素が左右反転する瞬間があるので、文字入りのバナーには向かないかもしれません。

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

animation: 1kurukuru 11.4s 1ease-out;

• 1アニメーション名　animation-name: kurukuru;
• 2かかる時間　animation-duration: 1.4s;
• 3変化する速度　animation-timing-function: ease-out;

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

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

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

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

SVGを動かす

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

APNGで動きをつける

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

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

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

ページ遷移をおしゃれに

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

最後に

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

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

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