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

こんにちは。

CSS3のトランジションを使っていると、時々トランジションの開始をコンマ数秒遅らせたいなと思ったことはありませんか?

JavaScriptを使わずに遅らせることはできるのかな…

そんなお悩みにお答えするのに最適なプロパティがtransition-delayプロパティです!

一昔前、トランジションプロパティが存在しなかった時はこのような動的なCSSの変化はJavaScriptというプログラミング言語を使用しての実装が基本でしたが、現在はCSSだけで実装することができます!

そこで今回は、transition-delayプロパティの

・基本的な使い方

をコピペして使うことのできるサンプルコードを使いながら解説していきます!

コーディング入門者向けの内容となっています。難しい言葉は一切出ませんので、ハードルを低くして読み進めてください!

transition-delayとは

transition-delayの読み方

transition-delayは「トランジション ディレイ」と読みます。

delayは日本語で「遅延」を意味しますが、transition-delayはCSS3のトランジションというCSSの動的な変化を遅延させる役割があります。

割と英語通りの意味なので覚えやすいですね!!

transition-delayはトランジションの開始を遅らせるためのプロパティ

transition-delayプロパティの用途を改めて具体的にいうと、

トランジションの開始を遅らせるためのプロパティ

です。

通常トランジションはトリガーとなるアクションを実行するとすぐにCSSが変化しますが、このtransition-delayプロパティを指定するとアクションを実行してから1秒後や0.5秒後など、任意の時間遅延させてからCSSを変化させることができます。

transition-delayで利用できる値

transition-delayプロパティでは以下の値を使うことができます。

説明
 単位つき数値  s(秒)やms(ミリ秒)などの単位を付けた数値を指定します。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 完全対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応
MEMO
以前は対応していないブラウザがいくつかあったため、「-webkit-」のようなベンダープレフィックスを使用することが推奨されていましたが、現在は付けなくても大丈夫とされています。

transition-delayの基本的な使い方

ここでは実際にtransition-delayプロパティの使い方をサンプルコードと一緒に解説していきます!

今回は下のようなコードにトランジションを追加していきます。赤い円にマウスを乗せると滑らかに青色になると思います。

See the Pen
transition-delay–1
by ryuga (@ryuga)
on CodePen.

transition-delayプロパティはトランジションを実行する時に使用します。

改めてトランジションについて説明すると、あるCSSプロパティの値をまた別の値に滑らかに変化させる技術をトランジションと言います。

トランジションを実行するためにはトリガーとなるアクションが必要なのですが、よく使われるアクションとしては「:hover」で実装する「マウスホバー」などがあります。

それでは今回はホバーしたら1秒遅れて青色に変化させるようtransition-delayを追加してみましょう。

See the Pen
transition-delay–2
by ryuga (@ryuga)
on CodePen.

すると先ほどとは違って、マウスを乗せてもすぐに青色には変化しませんよね。

ホバーの擬似クラスに「 transition-delay: 1s; 」と指定しているので、マウスを乗せて1秒後に青色になるようになっています。

このように、 transition-delayを指定するとトランジションを任意の時間、遅延させることができます!

まとめ

いかがでしょうか?

今回はtransition-delayプロパティの基本的な使い方をサンプルコードを使いながら解説していきました。

トランジションの遅延は遅らせすぎても早すぎてもぎこちなく見えてしまいがちですが、しっかり遅延時間を調整すると、見ている人にとても心地よい視覚効果を与えることができます。

ぜひこの機会に使用方法をマスターして、Webデザインに取り入れましょう!!

参考文献:http://www.htmq.com/css3/transition-delay.shtml