CSS animation-delay 属性詳解：アニメーション遅延を使いこなす
このページでは、CSS の `animation-delay` 属性について詳しく解説します。アニメーション開始前の遅延時間を設定する方法を学び、より創造的で魅力的なウェブページアニメーション効果を実現しましょう。
animation-delay 属性とは？
`animation-delay` 属性は、アニメーションが開始される前に遅延させる時間を制御します。デフォルト値は `0s` で、これはアニメーションがすぐに開始されることを意味します。
以下は、`animation-delay` の基本的な使い方を示す簡単なコード例です。
<!DOCTYPE html>
<html>
<head>
<style>
.example {
width: 100px;
height: 100px;
background-color: red;
animation-name: example-animation;
animation-duration: 2s;
animation-delay: 1s; /* アニメーションは1秒後に開始 */
}
@keyframes example-animation {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>
この例では、赤い四角形が1秒後に黄色に変化するアニメーションが定義されています。 `animation-delay: 1s;` によってアニメーション開始前に1秒間の遅延が設定されています。
animation-delay の値と単位
`animation-delay` 属性には、以下の値を指定できます。 * **正の時間値**: 遅延の秒数またはミリ秒数を表します。例：`1s`、`500ms` * **負の時間値**: アニメーションがその周期の特定の時間から開始されることを表します。例：`-1s` は、アニメーションが逆再生の1秒目から開始されることを意味します。 * **0**: 遅延がないことを表し、アニメーションはすぐに開始されます。 以下は、正の値、負の値、0 のそれぞれの効果を示すコード例です。
<!DOCTYPE html>
<html>
<head>
<style>
.example1 { /* 1秒の遅延 */
animation-delay: 1s;
}
.example2 { /* 1秒前から開始 */
animation-delay: -1s;
}
.example3 { /* 遅延なし */
animation-delay: 0;
}
</style>
</head>
<body>
<div class="example1">例1</div>
<div class="example2">例2</div>
<div class="example3">例3</div>
</body>
</html>
複数の遅延値の使用
`animation-delay` 属性には、カンマで区切って複数の値を指定することで、同じアニメーションの異なるサイクルに異なる遅延を設定できます。遅延値の数は、 `animation-iteration-count` 属性の値と同じかそれより少なくする必要があります。遅延値の数が少ない場合は、値が繰り返し使用されます。 以下は、複数の遅延値を使用して複雑なアニメーション効果を作成する例です。
<!DOCTYPE html>
<html>
<head>
<style>
.example {
animation-delay: 1s, 2s, 3s; /* 1回目: 1秒後、2回目: 2秒後、3回目: 3秒後 */
}
</style>
</head>
<body>
<div class="example">例</div>
</body>
</html>
animation-delay の適用場面
`animation-delay` 属性は、以下のような場面で役立ちます。 * **交互アニメーションの作成**: 異なる遅延時間を設定することで、複数の要素を順番にアニメーションさせることができます。例えば、カルーセル効果の実装など。 * **現実世界の動作のシミュレーション**: 例えば、物体が落下する際の遅延を表現できます。 * **ユーザーエクスペリエンスの向上**: 例えば、ユーザー操作の後、少し遅らせてからヒントメッセージを表示することで、情報が唐突に表示されるのを防ぐことができます。 以下は、各適用場面における簡単なコード例と効果の説明です。 **例1：交互アニメーション**
<style>
.item {
animation: slide-in 2s ease infinite;
}
.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 1s; }
.item:nth-child(3) { animation-delay: 2s; }
@keyframes slide-in {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
</style>
<style>
.ball {
animation: fall 1s ease-in forwards;
animation-delay: 0.5s;
}
@keyframes fall {
from { transform: translateY(0); }
to { transform: translateY(100px); }
}
</style>
<style>
.tooltip {
opacity: 0;
animation: fade-in 0.5s ease forwards;
animation-delay: 1s;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
ブラウザの対応状況
以下の表は、主要なブラウザにおける `animation-delay` 属性の対応状況を示しています。| ブラウザ | バージョン | 対応状況 |
|---|---|---|
| Chrome | 43+ | 対応済み |
| Firefox | 16+ | 対応済み |
| Safari | 9+ | 対応済み |
| Edge | 12+ | 対応済み |
| Internet Explorer | 10+ | 対応済み |