こんにちは。
CSS3でアニメーションを実装していると、状況によっては少しアニメーションの再生を遅延させたいなという時はありますよね。
そんな時に役に立つCSSプロパティが「animation-delay」プロパティです。
そんなコーダー入門者の方に向けて、今回はanimation-delayプロパティの
について徹底解説します！
目次
animation-delayとは
animation-delayの読み方
animation-delayは「アニメーション ディレイ」と読みます。
delayは日本語で「遅延」を意味します。
割と意味を捉えやすいプロパティ名ですね！
animation-delayはアニメーションの再生の開始を遅らせるプロパティ
改めてanimation-delayプロパティの用途を具体的にいうと、
です。
値に遅延させたい時間を入力することによって、キーフレームに指定したアニメーションの再生を遅らせることができます。
animation-delayで利用できる値
animation-delayプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| 単位つき数値 | s(秒)やms(ミリ秒)を付けて指定します。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
animation-delayの基本的な使い方
ここではanimation-delayプロパティについて、その使い方をサンプルコードと一緒に解説していきます。
animation-delayは通常、「@keyframes」や「animation-name」、「animation-duration」などのアニメーション関連のプロパティと併用して使用します。
「animation-name」や「animation-duration」とは違い、CSSアニメーションを実装する上で必須のプロパティではないので、遅延の必要がない場合は設定する必要はありません！
See the Pen
animation-delay-article by ryuga (@ryuga)
on CodePen.
今回はanimation-delayプロパティに「2s」を指定したので、2秒後に円の背景色が赤→青に変わるのが分かると思います。
このように、animation-delayプロパティを指定することによって、任意の時間アニメーションの開始を遅らせることができます。
animation-delayで指定できる時間
animation-delayプロパティやanimation-durationなどのアニメーション関連のプロパティやCSS3のトランジション関連のプロパティなど、時間を指定する必要のあるプロパティには時間に関係する単位を付けて指定する必要があります。
ここで、時間に関係する単位をおさらいしておきましょう。
| 値 | 説明 |
|---|---|
| s | 秒を表します。英語のsecondの略称です。 |
| ms | ミリ秒を表します。1ミリ秒は 1/1000秒になります。 |
See the Pen
animation-delay-article–ms by ryuga (@ryuga)
on CodePen.
サンプルコードでは、animation-delayプロパティを「2000ms」に指定しましたが、これは「2s」と指定した場合と同様の時間、すなわち2秒になります。
まとめ
いかがでしょうか？
今回はanimation-delayプロパティの基本的な使い方からアニメーションやトランジション関連のプロパティで使用する時間に関係する単位の解説をしていきました。
アニメーションの遅延は毎回必要なわけではありませんが、WebサイトのUI(ユーザーインターフェース)などを考慮する場合には、心地よい時間でアニメーションを再生させる必要があります。
アニメーションの遅延はこのようなWebサイトには必要な技術でもあるので、いつでも使用できるようこの記事でみなさんが使い方を抑えることができたら幸いです。
参考文献：http://www.htmq.com/css3/animation-delay.shtml
