第7回：CSSアニメーションの基礎と応用

2024-08-10

今回はCSSアニメーションを使ってカフェサイトに動きを追加する方法について学びます。
アニメーションを使うことでユーザー体験を向上させ、サイトをより魅力的に見せることができます。

CSSアニメーションの基本

CSSアニメーションは要素のスタイルを時間の経過に伴って変化させる方法です。
アニメーションを作成するためには以下のプロパティを使用します。

@keyframes: アニメーションのステップを定義します。
animation-name: アニメーションの名前を指定します。
animation-duration: アニメーションの継続時間を指定します。
animation-timing-function: アニメーションの速度曲線を指定します。
animation-delay: アニメーションの開始を遅らせる時間を指定します。
nimation-iteration-count: アニメーションを繰り返す回数を指定します。

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

.element {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

ここでは要素が右に移動するアニメーションを作成しています。
@keyframes slideの所で0%（最初）から100%（最後）にかけて、要素を100px動かします。
.elementの所で、どのように右に動かすかを細かく設定しています。

カフェサイトへの適用例

カフェサイトにアニメーションを追加して動きを取り入れてみましょう。
例えばメニュー項目にホバーエフェクトとしてアニメーションを追加します。

/* ホバーアニメーション */
@keyframes hoverEffect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

nav a {
  display: inline-block;
  margin: 0 10px;
  padding: 10px;
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}

nav a:hover {
  animation-name: hoverEffect;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
}

ここでは単純なa:hover（ホバー疑似要素）では表現できないステップごとのアニメーションを設定しています。

HTMLの修正

カフェサイトのHTMLファイルを更新してアニメーションを適用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カフェサイト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>カフェへようこそ</h1>
    <nav>
      <a href="index.html">ホーム</a>
      <a href="menu.html">メニュー</a>
      <a href="contact.html">お問い合わせ</a>
    </nav>
  </header>
  <main>
    <div class="section-container">
      <div class="section-item">
        <h2>カフェの紹介</h2>
        <p>私たちのカフェは最高のコーヒーと心地よい空間を提供します。</p>
      </div>
      <div class="section-item">
        <h2>おすすめメニュー</h2>
        <p>人気のコーヒーやデザートをお楽しみください。</p>
      </div>
      <div class="section-item">
        <h2>特別イベント</h2>
        <p>毎週末には特別イベントを開催しています。</p>
      </div>
      <div class="section-item">
        <h2>アクセス</h2>
        <p>カフェへのアクセス方法をご紹介します。</p>
      </div>
    </div>
  </main>
  <footer>
    <p>© 2024 カフェサイト. All rights reserved.</p>
  </footer>
</body>
</html>