【コピペで実装】CSSアニメーションの基本-デザインとコードまとめ10選-

CSSでアニメーションを作成しよう

WebサイトやアプリのUIをより魅力的にするために、CSSアニメーションは欠かせません。
本記事では、初心者でも簡単にコピペで実装できる基本的なCSSアニメーションを10種類紹介します。

CSSアニメーションが開始されるタイミング

1. 読み込み時に開始するアニメーション [CSS]

ページの読み込み時に自動でアニメーションを開始するには、animationプロパティを直接適用します。

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 1s ease-in-out;
}

この場合、ページが読み込まれると同時にフェードインします。

---

2. ホバー時に開始するアニメーション [CSS]

ホバー時にアニメーションを発火させるには、:hover疑似クラスを使用します。

/* 動きの設定 */
@keyframes zoomIn {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}
/* アニメーション「zoonIn」を指定 */
.hover-zoom:hover {
  animation: zoomIn 1s ease-in-out;
}

マウスが要素に触れたときに拡大アニメーションが発動します。

---

3. スクロール時に開始するアニメーション [CSS + jQuery]

スクロール時にアニメーションを発火させるには、jQueryを活用します。

$(window).on("scroll", function() {
  $(".scroll-fade").each(function() {
    var position = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > position - windowHeight + 100) {
      $(this).addClass("fade-in");
    }
  });
});

このコードにより、指定した要素がスクロールで表示されたタイミングでフェードインします。

---

4. クリック時に開始するアニメーション [CSS + jQuery]

クリック時にアニメーションを発火させるには、jQueryのclickイベントを利用します。

$(".click-button").on("click", function() {
  $(this).addClass("fade-out");
});

ボタンをクリックすると、その要素がフェードアウトします。

CSSアニメーションの実装例 10選

01. フェードイン（Fade In）

画面に現れる際に、徐々に透明度が増して表示されるアニメーション。

See the Pen fadeIn – cssアニメーション by Dezadezi (@dezadezi) on CodePen.

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 1s ease-in-out;
}

02. フェードアウト（Fade Out）

徐々に透明度が下がり、消えていくアニメーション。

See the Pen fadeOut – cssアニメーション by Dezadezi (@dezadezi) on CodePen.

/* 動きの設定 */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* アニメーション「fadeOut」を指定 */
.fade-out {
  animation: fadeOut 1s ease-in-out;
}

03. スライドイン（Slide In）

画面外から横方向に滑らかに移動しながら表示されるアニメーション。

See the Pen slideIn – cssアニメーション by Dezadezi (@dezadezi) on CodePen.

/* 動きの設定 */
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
/* アニメーション「slideIn」を指定 */
.slide-in {
  animation: slideIn 1s ease-in-out;
}

04. スライドアウト（Slide Out）

表示されている要素が横方向に滑らかに移動して画面外へ消えるアニメーション。

See the Pen slideOut – cssアニメーション by Dezadezi (@dezadezi) on CodePen.

/* 動きの設定 */
@keyframes slideOut {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
/* アニメーション「slideOut」を指定 */
.slide-out {
  animation: slideOut 1s ease-in-out;
}

05. 拡大（Zoom In）

要素が小さい状態から拡大して現れるアニメーション。

See the Pen zoomIn – cssアニメーション by Dezadezi (@dezadezi) on CodePen.

@keyframes zoomIn {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
.zoom-in {
  animation: zoomIn 1s ease-in-out;
}

06. 縮小（Zoom Out）

要素が元のサイズから徐々に小さくなり、消えていくアニメーション。

See the Pen zoomOut – cssアニメーション by Dezadezi (@dezadezi) on CodePen.

@keyframes zoomOut {
  from { transform: scale(1); }
  to { transform: scale(0); }
}
.zoom-out {
  animation: zoomOut 1s ease-in-out;
}

07. バウンス（Bounce）

要素が上下に弾むように動くアニメーション。

See the Pen bounce – cssアニメーション by Dezadezi (@dezadezi) on CodePen.

/* 動きの設定 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
/* アニメーション「bounce」を指定 */
.bounce {
  animation: bounce 1s infinite;
}

08. ローテーション（Rotate）

要素が360度回転し続けるアニメーション。

See the Pen rotate – cssアニメーション by Dezadezi (@dezadezi) on CodePen.

/* 動きの設定 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* アニメーション「rotate」を指定 */
.rotate {
  animation: rotate 1s linear infinite;
}

09. フリップ（Flip）

要素がY軸を中心に反転するアニメーション。

See the Pen flip – cssアニメーション by Dezadezi (@dezadezi) on CodePen.

/* 動きの設定 */
@keyframes flip {
  from { transform: rotateY(0); }
  to { transform: rotateY(180deg); }
}
/* アニメーション「flip」を指定 */
.flip {
  animation: flip 1s ease-in-out;
}

10. パルス（Pulse）

要素が一定のリズムで拡大・縮小を繰り返すアニメーション。

See the Pen pulse – cssアニメーション by Dezadezi (@dezadezi) on CodePen.

/* 動きの設定 */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
/* アニメーション「pulse」を指定 */
.pulse {
  animation: pulse 1s infinite;
}

まとめ

CSSアニメーションを活用することで、Webサイトのデザインをより魅力的にすることができます。
本記事で紹介したコードをコピペするだけで簡単に実装できるので、ぜひ試してみてください！