CSS アニメーションで要素の一部だけアニメーション化する方法

animation-range は、CSS アニメーションのプロパティであり、アニメーションの 適用範囲 を指定します。これは、アニメーション効果が要素のどの部分に適用されるかを制御するために使用されます。

値

animation-range は、以下のいずれかの値を取ることができます。

• <percentage>: アニメーション効果は、要素の幅または高さの指定された割合に適用されます。例えば、animation-range: 50% は、要素の幅の半分にのみアニメーションを適用します。
• contents: アニメーション効果は、要素のコンテンツ領域 (パディングとボーダーを除いた領域) にのみ適用されます。
• normal: アニメーション効果は、要素の可視領域 (ペイント領域) にのみ適用されます。要素の一部が隠れている場合、その部分はアニメーション化されません。
• all: デフォルト値です。アニメーション効果は要素全体に適用されます。

例

以下の例は、要素の上半分のみをフェードインするアニメーションを示しています。

.element {
  animation: fade-in 2s ease-in-out forwards;
  animation-range: 50%;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

ブラウザの互換性

animation-range は比較的新しいプロパティであり、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、ベンダープレフィックス -webkit- または -moz- を付けて使用する必要があります。

.element {
  -webkit-animation: fade-in 2s ease-in-out forwards;
  -webkit-animation-range: 50%;

  -moz-animation: fade-in 2s ease-in-out forwards;
  -moz-animation-range: 50%;
}

• animation-fill-mode プロパティを使用して、アニメーションが終了した後に要素のスタイルを維持する方法を制御できます。
• animation-range は、他のアニメーションプロパティ (animation-name、animation-duration など) と一緒に使用できます。

---

例 1: 要素の幅をアニメーション化する

この例では、要素の幅を 0 から 100% にアニメーションします。

.element {
  width: 0;
  animation: width-expand 2s ease-in-out forwards;
  animation-range: 0%;
}

@keyframes width-expand {
  100% {
    width: 100%;
  }
}

例 2: 要素の色をアニメーション化する

この例では、要素の色を赤から青にアニメーションします。

.element {
  background-color: red;
  animation: color-change 2s ease-in-out forwards;
  animation-range: 50%;
}

@keyframes color-change {
  50% {
    background-color: blue;
  }
}

例 3: 要素を回転アニメーション化する

この例では、要素を 0 度から 360 度回転アニメーションします。

.element {
  transform: rotate(0deg);
  animation: rotation 2s linear forwards;
  animation-range: 25%;
}

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

例 4: 要素をフェードイン・フェードアウトアニメーション化する

この例では、要素をフェードインしてからフェードアウトするアニメーションを作成します。

.element {
  opacity: 0;
  animation: fade-in-out 4s ease-in-out alternate;
  animation-range: 0% 75%;
}

@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

例 5: スクロール連動アニメーション

この例では、要素が画面にスクロールされると要素をフェードインするアニメーションを作成します。

.element {
  opacity: 0;
  animation: fade-in 2s ease-in-out forwards;
  animation-timeline: scroll();
  animation-range: contain 0% cover 50%;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

---

代替方法としては、以下の方法があります。

@keyframes を使用する

animation-range の代わりに @keyframes を使用して、アニメーション効果を要素の特定の部分に適用することができます。

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

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

この例では、要素の上半分のみをフェードインするアニメーションを作成しています。50% のキーフレームで要素の透明度を 1 に設定することで、要素の上半分のみがフェードインします。

疑似要素を使用する

疑似要素を使用して、アニメーション効果を適用したい要素の一部を表現することもできます。

.element {
  position: relative;
}

.element::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: red;
  animation: fade-in 2s ease-in-out forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

この例では、要素の上半分を赤くフェードインするアニメーションを作成しています。::before 疑似要素を使用して、要素の上半分を表す赤い矩形を作成し、それに fade-in アニメーションを適用しています。

JavaScript を使用する

JavaScript を使用して、アニメーション効果を要素の特定の部分に動的に適用することもできます。

const element = document.querySelector('.element');

const animation = element.animate([
  { opacity: 0 },
  { opacity: 1 },
  { opacity: 0 }
], {
  duration: 2000,
  easing: 'ease-in-out',
  fill: 'forwards'
});

animation.play();

この例では、要素をフェードイン・フェードアウトするアニメーションを作成しています。JavaScript で element.animate() メソッドを使用してアニメーションを作成し、animation-range の代わりに keyframes オプションを使用してアニメーション効果を要素の特定の部分に適用しています。