開発 2024.12.06

CSS Animation入門：基本から応用まで！魅力的なウェブデザインを作ろう

ウェブデザインにおけるアニメーションの役割は年々増加しています。静的なデザインだけでなく、CSS Animationを使って動きを加えることで、訪問者の目を引く魅力的なウェブサイトを作ることができます。
本記事では、CSS Animationの基本から応用までを丁寧に解説し、デザインの幅を広げる方法を学びます。

1 1. CSS Animationとは？
2 2. CSS Animationの基本構文
3 3. 実際にCSS Animationを使ってみよう
4 4. 応用的なアニメーションテクニック
5 5. アニメーションのベストプラクティス
6 6. CSS Animationでデザインの幅を広げよう！

1. CSS Animationとは？

CSS Animationは、HTML要素にアニメーション効果を適用するためのCSSの機能です。JavaScriptを使わなくても、簡単なコードでアニメーションを実現できるため、手軽にインタラクティブなデザインを導入できます。

CSS Animationのメリット:

JavaScriptよりもコードがシンプル
軽量でパフォーマンスに優れる
CSSだけでスタイルと動きを統一できる

2. CSS Animationの基本構文

CSS Animationを使用するには、@keyframesルールとanimationプロパティを組み合わせて使用します。

基本構文:

@keyframes アニメーション名 {
  0% { /* 開始時のスタイル */ }
  100% { /* 終了時のスタイル */ }
}

.selector {
  animation: アニメーション名 再生時間 速さの変化 遅延時間 繰り返し回数 再生方向;
}

プロパティの解説:

プロパティ	説明	例
animation-name	使用するアニメーションの名前	fadeIn
animation-duration	アニメーションの再生時間	2s, 500ms
animation-timing-function	動きの速さの変化	ease, linear
animation-delay	アニメーション開始までの遅延時間	1s
animation-iteration-count	アニメーションの繰り返し回数	1, infinite
animation-direction	アニメーションの再生方向	normal, reverse

3. 実際にCSS Animationを使ってみよう

(1) フェードインアニメーション

要素が徐々に表示されるアニメーションを作成します。

<div class="fade-in"> フェードインアニメーション </div>

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

.fade-in {
  animation: fadeIn 2s ease-in-out;
}

(2) 要素を回転させる

要素を360度回転させるアニメーションを作成します。

<div class="rotate"> 回転アニメーション </div>

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.rotate {
  animation: rotate 3s linear infinite;
}

(3) 要素をスライドさせる

要素を左から右に移動させます。

<div class="slide"> スライドアニメーション </div>

@keyframes slideIn {
  0% {  transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

.move-right {
  animation:  slideIn 1s ease-out;
}

4. 応用的なアニメーションテクニック

(1) ホバーアニメーション

マウスをホバーしたときにアニメーションを発動させる方法です。

<div class="hover-animate"> ホバーして！ </div>

.hover-animate {
  display: inline-block;
  padding: 10px 20px;
  background-color: lightblue;
  transition: transform 0.3s ease;
}

.hover-animate:hover {
  transform: scale(1.2) rotate(10deg);
}

(2) バウンスアニメーション

要素が跳ねるような動きを作成します。

<div class="bounce"> バウンス効果 </div>

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.bounce {
  animation: bounce 1s ease infinite;
}

(3) 複数のプロパティをアニメーション化

1つのアニメーションで位置や透明度、大きさを同時に変化させる方法です。

<div class="multi-anim"> 複数の動き </div>

@keyframes multiMove {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  50% { transform: translateX(50px) scale(1.5); opacity: 0.5; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

.multi-anim {
  animation: multiMove 2s ease-in-out infinite;
}

5. アニメーションのベストプラクティス

パフォーマンスを考慮する

アニメーションの対象プロパティはtransformやopacityを優先的に使用しましょう。これによりGPUがレンダリングを担当し、パフォーマンスが向上します。

長すぎるアニメーションは避ける

再生時間が長すぎるとユーザー体験が損なわれることがあります。適度な時間を設定しましょう。

モバイルデバイスへの配慮

モバイル環境ではアニメーションが重くなることがあるため、メディアクエリを使用して制御するのがおすすめです。

6. CSS Animationでデザインの幅を広げよう！

CSS Animationを使いこなせば、ウェブサイトに動きを加え、訪問者に印象を与えることができます。本記事で紹介した基本と応用のテクニックをぜひ試してみてください。
アニメーションを活用して、あなたのデザインを次のレベルに引き上げましょう！

Groworks Inc.

ものづくりのまち燕三条にある三条ものづくり学校を拠点とし、新潟市、長岡市、燕市、柏崎市を中心に活動しているウェブサイト・ホームページ制作会社です。

View All