概要
animation-rangeは、CSSでアニメーションの再生範囲をカスタマイズするためのプロパティです。これにより、アニメーションの開始位置や終了位置を細かく設定でき、特定の範囲だけを再生することが可能になります。例えば、アニメーション全体の一部分だけをループさせたい場合や、特定のタイミングでアニメーションを始めたいときに有効です。ただし、animation-rangeは実験的なプロパティであり、現時点でのブラウザサポートは限られています。
animation-rangeの基本
構文
animation-range: <start> <end>;
start
アニメーションの再生を開始する位置を指定します。値はパーセンテージ（%）や時間（秒: s、ミリ秒: ms）で指定できます。end
アニメーションの再生を終了する位置を指定します。こちらもパーセンテージや時間で指定可能です。
使用例
基本的な使用例 - アニメーションの再生範囲を設定
以下の例では、アニメーションの再生を50%の位置から開始し、80%の位置で終了します。
@keyframes slide {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(100px);
}
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: slide 3s infinite;
animation-range: 50% 80%;
}
この設定により、slideアニメーションは50%の位置から開始され、80%の位置で終了するため、指定した範囲内でのみアニメーションが再生されます。
特定の範囲でループするアニメーション
animation-rangeを使用することで、アニメーションの一部分だけをループさせることも可能です。
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
animation: bounce 2s infinite;
animation-range: 20% 80%;
}
このコードでは、bounceアニメーションの20%から80%の範囲のみがループ再生されます。これにより、アニメーションの全体ではなく、中央の部分だけを繰り返す効果を実現しています。
注意点
- ブラウザのサポート状況
animation-rangeは実験的なプロパティであり、現時点では多くのモダンブラウザでサポートされていません。実際に使用する際は、ブラウザの互換性を確認することが重要です。 - 代替手段の検討
現在のブラウザ環境でanimation-rangeがサポートされていない場合、@keyframesを工夫するか、JavaScriptを使ってアニメーションの範囲を制御する方法があります。例えば、JavaScriptでアニメーションの再生開始・終了位置を制御することで、同様の効果を得られます。 - パフォーマンスの考慮
アニメーション範囲を指定することで、パフォーマンスが向上する場合もありますが、複雑なアニメーションや範囲指定が多いと逆にパフォーマンスに悪影響を与えることもあるため、適切な範囲設定が求められます。
animation-rangeの対応ブラウザ
- Chrome: 非サポート
- Firefox: 非サポート
- Safari: 非サポート
- Edge: 非サポート
- Opera: 非サポート 現時点では、ほとんどのブラウザでanimation-rangeがサポートされていないため、実際のプロジェクトでは使用を控えるべきです。仕様が標準化されるまで、他の方法でアニメーションをカスタマイズすることをおすすめします。
まとめ
animation-rangeは、アニメーションの再生範囲を自由にカスタマイズできるプロパティですが、現在のブラウザサポート状況を考えると実用性はまだ低いです。アニメーションの一部をループさせる、特定の範囲だけ再生するなど、使い方次第で高度な表現が可能ですが、現時点では他の手段で同様の効果を得ることが必要です。今後のCSSの進化に注目しながら、最適なアニメーション表現を追求していきましょう。