【CSS】animation-delayプロパティの使用方法を徹底解説!!

こんにちは。

CSS3でアニメーションを実装していると、状況によっては少しアニメーションの再生を遅延させたいなという時はありますよね。

そんな時に役に立つCSSプロパティが「animation-delay」プロパティです。

でも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

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?