概要

animation-range-endは、CSSでアニメーションの終了位置を設定するためのプロパティです。このプロパティを使うことで、アニメーションの再生を特定の位置で止めることができ、全体のアニメーションではなく一部分だけを表示させることが可能になります。特に、視覚効果を細かく調整したい場合や、複雑なアニメーションを管理したいときに役立ちます。ただし、animation-range-endは現在、実験的なプロパティであり、ほとんどのブラウザではサポートされていないため、使用には注意が必要です。

animation-range-endの基本

構文

animation-range-end: <percentage> | <time>;

• percentage
  アニメーションの再生終了位置をパーセンテージで指定します。たとえば、80%と設定すると、アニメーションの80%の位置で終了します。
• time
  秒（s）やミリ秒（ms）で終了位置を指定します。たとえば、3sと指定すると、アニメーションの再生が3秒目で終了します。

使用例

基本的な使用例 - アニメーションを途中で終了

以下の例では、animation-range-endを使用して、アニメーションを70%の位置で終了します。

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(0);
    }
}
.ball {
    width: 50px;
    height: 50px;
    background-color: #f39c12;
    border-radius: 50%;
    animation: bounce 5s infinite;
    animation-range-end: 70%;
}

この設定により、bounceアニメーションは70%の位置で終了し、通常の終点まで再生されずに途中で停止します。

時間指定でのアニメーション終了

次の例では、アニメーションの終了位置を時間で指定します。この例では、アニメーションが4秒後に終了します。

@keyframes moveRight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(200px);
    }
}
.box {
    width: 100px;
    height: 100px;
    background-color: #2ecc71;
    animation: moveRight 6s infinite;
    animation-range-end: 4s;
}

この設定では、アニメーションが6秒の長さですが、4秒目で再生が終了するため、完全な移動は行われません。

注意点

• ブラウザのサポート状況
  animation-range-endは、現在の主要なブラウザでサポートされていない実験的なプロパティです。そのため、使用する際にはブラウザの互換性を確認し、適切なフォールバックを用意する必要があります。
• 代替手段の検討
  現在のCSSでは、アニメーションの終了を制御する一般的な方法は存在しません。そのため、JavaScriptを使用してアニメーションの終了を制御するか、@keyframesを工夫して類似の効果を再現することが必要です。
• パフォーマンスへの配慮
  アニメーションの一部分のみ再生させることで、視覚的な効果は向上しますが、複雑なアニメーションや多用しすぎるとパフォーマンスに悪影響を与える可能性があります。デバイスの負荷を考慮して使用しましょう。

animation-range-endの対応ブラウザ

• Chrome: 非サポート
• Firefox: 非サポート
• Safari: 非サポート
• Edge: 非サポート
• Opera: 非サポート animation-range-endは、現時点で主要なブラウザでのサポートがありません。使用する場合は、実験的な機能として利用するか、代替の手段を検討する必要があります。

まとめ

animation-range-endは、アニメーションの終了位置を柔軟にカスタマイズできる有用なプロパティですが、現在のブラウザ環境では実験的であり、広く利用できる状況にはありません。代替手段として、JavaScriptを用いたアニメーション制御や、@keyframesの調整が必要となります。今後のCSS仕様の進化に注目しつつ、現状では最適な方法でアニメーションを活用しましょう。