BLOG ブログ

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

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

2021/01/07

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

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

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

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

【もくじ】

シンプル・分かりやすい・綺麗
ポップ・勢いがいい
スタイリッシュ・かっこいい・スピーディー
かわいい・柔らかい
【BRISKブログ】アニメーション記事の紹介
最後に

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

// HTML
<div class="anim-box"></div>

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

// HTML

// CSS

.anim-box {

background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);

border-radius: 5px;

max-width: 400px;

height: 250px;

}

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

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

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

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

フェードイン

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

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

.anim-box.fadein.is-animated {

animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;

}

@keyframes fadeIn {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

スライドイン

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

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

.anim-box.slidein.is-animated {

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

}

@keyframes slideIn {

0% {

transform: translateX(180px);

opacity: 0;

}

100% {

transform: translateX(0);

}

40%,100% {

opacity: 1;

}

ズームイン

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

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

.anim-box.zoomin.is-animated {

animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;

}

@keyframes zoomIn {

0% {

transform: scale(0.8);

opacity: 0;

}

100% {

opacity: 1;

transform: scale(1);

}

おなじみのフェードイン・スライドイン・ズームインの紹介でした。
組み合わせてみるなど、カスタマイズもいろいろできそうです。
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;
  }
}

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

}

ぽよよんと跳ねる2

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

.anim-box.poyoyon2.is-animated {
  animation: poyoyon2 1s ease-in-out 1 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;
  }
}

.anim-box.poyoyon2.is-animated {

animation: poyoyon2 1s ease-in-out 1 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;

}

ぽよよんと跳ねる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);
  }
}

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

}

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) 1 forwards;
}

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

.anim-box.slide-skew.is-animated {

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

}

@keyframes slide-skew {

0% {

transform: translate(180px,30px);

opacity: 0;

}

100% {

transform: translate(0,0);

}

20%,100% {

opacity: 1;

}

ポップアップ

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

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

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

.anim-box.popup.is-animated {

animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;

}

@keyframes popup {

0% {

transform: translateY(40px) scale(0.8);

opacity: 0;

}

100% {

transform: translateY(0) scale(1.0);

}

80%, 100% {

opacity: 1;

}

ぽよぽよ収縮する

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

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

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

}

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

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

きらんと光る

ホバーすると要素がきらんと光るアニメーションです。
光る速度を変えてみたり、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 1;
}

@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;
  }
}

.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 1;

}

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

}

背景色が流れてくる

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

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

//CSS
.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;
  }
}

//HTML

<span class="bg-wrap"><span class="inn">背景色が流れてくる</span></span><br>

<span class="bg-wrap"><span class="inn">アニメーション</span></span>

</div>

//CSS

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

}

文字がぬるりと現れる

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

//HTML
<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>

//CSS
.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);
}

//HTML

<span class="bg-wrap"><span class="inn large">文字がぬるりと現れる</span></span>

<span class="bg-wrap"><span class="inn small">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキスト</span></span>

</div>

//CSS

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

}

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

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

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

//CSS
.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%)
  }
}

//HTML

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

</div>

//CSS

.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%)

}

線が伸びる

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

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

//CSS
.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%;
}

//HTML

//CSS

.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%;

}

かわいい・柔らかい

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

フェードアップ

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

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

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

.anim-box.fadeup.is-animated {

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

}

@keyframes fadeup {

0% {

transform: translateY(30px);

opacity: 0;

}

80% {

opacity: 1;

}

100% {

opacity: 1;

transform: translateY(0);

}

ボーダーが緩やかにつく

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

//HTML
<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>

//CSS
.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;
  }
}

//HTML

</div>

//CSS

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

}

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

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

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

//CSS
.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);
}

//HTML

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

</div>

//CSS

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

}

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

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

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

//CSS
.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;
  }
}

//HTML

<span class="txt">Scroll</span>

</div>

//CSS

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

}

ふわふわ揺れる

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

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

//CSS
.fuwafuwa {
  animation: fuwafuwa 3s infinite ease-in-out .8s 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);
  }
}

//HTML

//CSS

.fuwafuwa {

animation: fuwafuwa 3s infinite ease-in-out .8s 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);

}

くるくる回りながら出現

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

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

//CSS
.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;
  }
}

//HTML

//CSS

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

}

【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ブログが、サイト制作のお役に立てれば幸いです！
ユーザーを飽きさせない・興味を引くサイト作りに励みましょう！

WEB コーディングサイト制作

一覧へ戻る

BLOG ブログ

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

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

フェードイン

スライドイン

ズームイン

ポップ・勢いがいい

ぽよよんと跳ねる

ぽよよんと跳ねる2

ぽよよんと跳ねる3

Bounce.js

ななめから出てくる

ポップアップ

ぽよぽよ収縮する

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

きらんと光る

背景色が流れてくる

文字がぬるりと現れる

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

線が伸びる

かわいい・柔らかい

フェードアップ

ボーダーが緩やかにつく

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

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

ふわふわ揺れる

くるくる回りながら出現

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

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

SVGを動かす

APNGで動きをつける

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

ページ遷移をおしゃれに

最後に

関連記事

BRISK
22年新卒採用

写真撮影つき
ホームページ制作

CONTACT お問い合わせ

BLOG ブログ

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

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

フェードイン

スライドイン

ズームイン

ポップ・勢いがいい

ぽよよんと跳ねる

ぽよよんと跳ねる2

ぽよよんと跳ねる3

Bounce.js

ななめから出てくる

ポップアップ

ぽよぽよ収縮する

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

きらんと光る

背景色が流れてくる

文字がぬるりと現れる

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

線が伸びる

かわいい・柔らかい

フェードアップ

ボーダーが緩やかにつく

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

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

ふわふわ揺れる

くるくる回りながら出現

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

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

SVGを動かす

APNGで動きをつける

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

ページ遷移をおしゃれに

最後に

関連記事

BRISK22年新卒採用

写真撮影つきホームページ制作

CONTACT お問い合わせ

BRISK
22年新卒採用

写真撮影つき
ホームページ制作