CSSアニメーション⑤~頻出CSSアニメーション編~

テキスト目次 > HTMLとCSSの応用 > CSSアニメーション⑤~頻出CSSアニメーション編~

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

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

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

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

目次

CSS animationの書き方

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

animation: animationName 1s ease 0.5s infinite alternate forwards;
CSS

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アニメーション前、最初のキーフレームで設定されたスタイルが当たった状態になっています。アニメーション後は、アニメーションで設定されたスタイルを適用されず、元のスタイルに戻ります。
  • bothforwards・backwardsの両方が適用された状態です。アニメーション前は、最初のキーフレームの状態になり、アニメーション後は最後のキーフレームの状態を保ちます。
  • infiniteforwards・backwardsの両方が適用された状態です。アニメーション前は、最初のキーフレームの状態になり、アニメーション後は最後のキーフレームの状態を保ちます。

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

参考ドキュメント：animation

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

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

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

フェードイン

出力結果

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


.anim-box.fadein.is-animated {
  animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
CSS

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

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;

スライドイン

出力結果

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


.anim-box.slidein.is-animated {
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
CSS

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

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;

ズームイン

出力結果

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


.anim-box.zoomin.is-animated {
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
CSS

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

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);　の値を変えて、上から浮き上がってくるふうにしてみたりなどもできます。

ポップ・勢いがいい

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

ぽよよんと跳ねる

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

出力結果

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


.anim-box.poyoyon.is-animated {
  animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}

@keyframes poyoyon {
  0% {
    transform: translateX(140px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
  20%,100% {
    opacity: 1;
  }
}
CSS

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

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

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

出力結果

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


.anim-box.poyoyon2.is-animated {
  animation: poyoyon2 1s ease-in-out forwards;
}

@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
CSS

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

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

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

出力結果

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


.anim-box.poyoyon3.is-animated {
  animation: poyoyon3 2.5s infinite;
  opacity: 1;
}
@keyframes poyoyon3 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}
CSS

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

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

ななめから出てくる

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

出力結果

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


.anim-box.slide-skew.is-animated {
  animation: slide-skew 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slide-skew {
  0% {
    transform: translate(180px,30px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  20%,100% {
    opacity: 1;
  }
}
CSS

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

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エリアを表示させるのに使ってもよく目立つと思います。


.anim-box.popup.is-animated {
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}
CSS

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

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;

ぽよぽよ収縮する

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

出力結果

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


.anim-box.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
CSS

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

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で光の濃さを調節してみてください。

出力結果

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


.anim-box.kiran {
  opacity: 1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.anim-box.kiran::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.anim-box.kiran:hover::before {
  animation: kiran 0.5s linear;
}

@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
CSS

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

animation: 1kiran 20.5s 3linear;

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

背景色が流れてくる

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

出力結果

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

<div class="bg">
  <span class="bg-wrap"><span class="inn">背景色が流れてくる</span></span><br>
  <span class="bg-wrap"><span class="inn">アニメーション</span></span>
</div>
HTML

.bg .bg-wrap {
  position: relative;
  display: inline-block;
  margin-top: 5px;
}
.bg.is-animated .bg-wrap::before {
  animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
}
.bg .bg-wrap .inn {
  color: #fff;
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  padding: 5px 15px;
  position: relative;
  z-index: 1;
}

@keyframes bg {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%, 100% {
    opacity: 1;
  }
}
CSS

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

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; がかかっていて、隠れているテキストがだんだん浮き上がってくるように見えます。

出力結果

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

<div class="matrix anim">
  <span class="bg-wrap"><span class="inn large">文字がぬるりと現れる</span></span>
  <span class="bg-wrap"><span class="inn small">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキスト</span></span>
</div>
HTML

.matrix .bg-wrap,
.matrix .bg-wrap .inn {
  display: block;
}

.matrix .bg-wrap {
  overflow: hidden;
  opacity: 0;
}

.matrix .bg-wrap + .bg-wrap {
  margin-top: 10px;
}

.matrix .bg-wrap .inn.large {
  font-size: 36px;
  font-weight: bold;
}
.matrix .bg-wrap .inn.small {
  font-size: 15px;
}

.matrix .bg-wrap .inn {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.matrix.is-animated .bg-wrap {
  opacity: 1;
}

.matrix.is-animated .bg-wrap .inn {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}
CSS

こちらは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()

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

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

出力結果

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

<div class="mask-bg anim">
  背景色が消えてから表示される
</div>
HTML

.mask-bg {
  color: transparent;
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bg::after {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, 100%);
}

.mask-bg.is-animated {
  color: #362ae0;
}
.mask-bg.is-animated::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}

@keyframes mask-bg {
  0% {
    transform: translate(0, 101%)
  }
  40%, 60% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(0, -100%)
  }
}
CSS

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

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);

線が伸びる

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

出力結果

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

<div class="line anim"></div>
HTML

.line {
  display: block;
  position: relative;
}
.line::after {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  content: '';
  display: block;
  height: 1px;
  width: 0;
  transform: translateX(-50%);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  bottom: 0;
  left: 50%;
}
.line.is-animated::after {
  width: 100%;
}
CSS

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

かわいい・柔らかい

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

フェードアップ

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

出力結果

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


.anim-box.fadeup.is-animated {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
CSS

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

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;

ボーダーが緩やかにつく

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

出力結果

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

<div class="stroke anim">
  <div class="border top"></div>
  <div class="border right"></div>
  <div class="border bottom"></div>
  <div class="border left"></div>
</div>
HTML

.stroke {
  background: #f0f0f0;
  max-width: 400px;
  height: 250px;
  position: relative;
}

.stroke .border {
  content: "";
  position: absolute;
  opacity: 0;
}
.stroke .border.top,
.stroke .border.bottom {
  width: calc(100% - 20px);
}
.stroke .border.top {
  border-top: 3px solid #362ae0;
  right: 0;
  top: 0;
}
.stroke .border.bottom {
  border-bottom: 3px solid #362ae0;
  left: 0;
  bottom: 0;
}

.stroke .border.right,
.stroke .border.left {
  height: calc(100% - 20px);
}
.stroke .border.right {
  border-right: 3px solid #362ae0;
  right: 0;
  top: 0;
}
.stroke .border.left {
  border-left: 3px solid #362ae0;
  left: 0;
  bottom: 0;
}

.stroke.is-animated .border {
  opacity: 1;
}

.stroke.is-animated .border.top,
.stroke.is-animated .border.bottom {
  animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.stroke.is-animated .border.right,
.stroke.is-animated .border.left {
  animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes stroke-width {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: calc(100% - 20px);
    opacity: 1;
  }
}

@keyframes stroke-height {
  0% {
    height: 0;
    opacity: 1;
  }
  100% {
    height: calc(100% - 20px);
    opacity: 1;
  }
}
CSS

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

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は非対応なため、アニメーションはせず最初から表示された状態になります。

出力結果

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

<div class="smooth anim">
  文字が滑らかに表示される
</div>
HTML

.smooth {
  clip-path: inset(0 100% 0 0);
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
  line-height: 1;
  height: 40px;
  margin-top: 15px;
}
.smooth.is-animated {
  clip-path: inset(0);
}
CSS

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

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

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

出力結果

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

<div class="scroll">
  <span class="txt">Scroll</span>
</div>
HTML

.scroll {
  display: inline-block;
  padding-top: 70px;
  position: relative;
}
.scroll::before {
  animation: scroll 3.5s infinite;
  border: solid #000;
  border-width: 0 0 1px 1px;
  content: "";
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: rotate(-45deg);
  width: 20px;
  height: 20px;
}
@keyframes scroll {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
  }
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
CSS

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

animation: 1scroll 23.5s 3infinite;

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

ふわふわ揺れる

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

出力結果

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

<div class="fuwafuwa"></div>
HTML

.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 70px;
  height: 70px;
  margin-top: 15px;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}
CSS

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

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」等のナンバリングをくるくると表示させてみるとよく目立ちます。
回転中は要素が左右反転する瞬間があるので、文字入りのバナーには向かないかもしれません。

<div class="kurukuru anim"></div>
HTML

.kurukuru {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  width: 50px;
  height: 50px;
  opacity: 0;
  padding-bottom: 40px;
}
.kurukuru.is-animated {
  animation: kurukuru 1.4s ease-out;
  opacity: 1;
}
@keyframes kurukuru {
  0%{
    transform: rotateY(0) translateY(40px);
    opacity: 0;
  }
  100%{
    transform: rotateY(360deg) translateY(0);
    opacity: 1;
  }
}
CSS

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

animation: 1kurukuru 11.4s 1ease-out;

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

チェックテスト

チェックテストを確認する

下記コードの挙動を確認し、@keyframesのまとまりがどのような挙動かを言葉としてまとめてdiscordにて共有ください。

<div class="anim-box zoomin is-animated"></div>


<style>
 .anim-box {
   background: linear-gradient(
     to right,
     #362ae0 0%,
     #3b79cc 50%,
     #42d3ed 100%
   );
   border-radius: 5px;
   max-width: 400px;
   height: 250px;
 }


 .anim-box.zoomin.is-animated {
   animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
 }


 @keyframes zoomIn {
   0% {
     transform: scale(0.8);
     opacity: 0;
   }
   100% {
     opacity: 1;
     transform: scale(1);
   }
 }
 /*@keyframesのまとまりの挙動を言葉としてまとめdiscordで共有ください。*/
</style>
HTML

お問い合わせ

相談などお気軽にお問い合わせ下さい

問い合わせフォーム
TOP