Key-animationの練習

CSSの@keyframesを用いたアニメーションは、ページ要素に動きを加えるのに非常に役立ちます。以下に、さまざまな@keyframesアニメーションの基本パターンを示します。

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

html
<div class="fade-in">フェードイン</div>
css
.fade-in {
  opacity: 0;
  animation: fadeInAnimation 2s ease forwards;
}

@keyframes fadeInAnimation {
  to {
    opacity: 1;
  }
}

2. スライドインアニメーション

html
<div class="slide-in">スライドイン</div>
css
.slide-in {
  transform: translateX(-100%);
  animation: slideInAnimation 2s ease forwards;
}

@keyframes slideInAnimation {
  to {
    transform: translateX(0);
  }
}

3. サイズ変化アニメーション

html
<div class="size-change">サイズ変化</div>
css
.size-change {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: sizeChangeAnimation 2s ease infinite;
}

@keyframes sizeChangeAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

4. 回転アニメーション

html
<div class="rotate">回転</div>
css
.rotate {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: rotateAnimation 2s linear infinite;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

5. カラー変化アニメーション

html
<div class="color-change">カラー変化</div>
css
.color-change {
  width: 100px;
  height: 100px;
  background-color: green;
  animation: colorChangeAnimation 2s ease infinite;
}

@keyframes colorChangeAnimation {
  0% {
    background-color: green;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: green;
  }
}

これらの基本的な@keyframesアニメーションを通じて、さまざまなアニメーション効果を実践的に練習することができます。アニメーションのタイミング、繰り返し、方向などを変えることで、さらに多彩なアニメーションが作成可能です。

練習問題

目標を読んで、下の回答を見ずに自力で実装してみてください。

練習問題 1: フェードイン・フェードアウトアニメーション

目標

要素が画面に現れるときにフェードインし、数秒後にフェードアウトするアニメーションを作成します。

html
<div class="fade-element">フェードイン・フェードアウト</div>
css
.fade-element {
  opacity: 0;
  animation: fadeInOut 5s ease-in-out forwards;
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

練習問題 2: バウンスアニメーション

目標

要素が上下にバウンスするアニメーションを作成します。

html
<div class="bounce-element">バウンス</div>
css
.bounce-element {
  animation: bounce 2s ease infinite;
}

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

練習問題 3: 色とサイズが変わるアニメーション

目標

要素の色とサイズが周期的に変化するアニメーションを作成します。

html
<div class="color-size-change">色とサイズ変化</div>
css
.color-size-change {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: colorSizeChange 3s ease infinite;
}

@keyframes colorSizeChange {
  0%, 100% {
    transform: scale(1);
    background-color: blue;
  }
  50% {
    transform: scale(1.5);
    background-color: red;
  }
}

これらの練習問題を通して、アニメーションの基本的な概念と応用方法を学び、さまざまな効果を持つアニメーションを作成することができます。HTMLとCSSを編集して、アニメーションの挙動を観察し、理解を深めましょう。