こんにちは。
CSS3のトランジションを使っていると、時々トランジションの開始をコンマ数秒遅らせたいなと思ったことはありませんか？
そんなお悩みにお答えするのに最適なプロパティが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 | 完全対応 |
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
