CSSアニメーション入門：animation-delayプロパティでアニメーション開始を遅らせる方法
CSSでアニメーションの開始タイミングを制御したい場合に便利なのが、animation-delayプロパティです。このプロパティを使うと、ページが読み込まれてからアニメーションが実際に始まるまでの待ち時間（遅延時間）を自由に設定できます。
animation-delayプロパティとは
animation-delayは、アニメーションが開始されるまでの遅延時間を指定するCSSプロパティです。値は秒（s）またはミリ秒（ms）単位で指定します。
- 正の値：指定した時間だけ待ってからアニメーションが開始されます。
- 0（デフォルト）：遅延なしですぐにアニメーションが始まります。
- 負の値：アニメーションが途中から始まったかのように動作します。例えば「-1s」を指定すると、1秒分進んだ状態から再生されます。
animation-delayの実装例
以下のコードでは、黄色いボックスに対して2秒の遅延を設定し、その後2秒かけて背景色が緑から青へと変化するアニメーションを実行しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
background-color: yellow;
animation-name: myanim;
animation-duration: 2s;
animation-delay: 2s;
}
@keyframes myanim {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
コードのポイント解説
このサンプルコードの動作は以下の流れになります。
- ページ読み込み直後、div要素は黄色で表示されます。
animation-delay: 2s;により、2秒間待機します。- 遅延時間が経過すると、
@keyframes myanimで定義されたアニメーションが開始され、背景色が緑から青へ2秒かけて変化します。
まとめ
animation-delayプロパティを活用すれば、複数の要素に異なる遅延時間を設定して、段階的にアニメーションを発生させる演出なども簡単に実現できます。Webサイトに動きのある表現を加えたいときは、ぜひ試してみてください。
-
CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法
writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し
-
CSSのpointer-eventsプロパティとは？使い方をコード例で解説
pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります