CSS - tansition-delay

トップ > CSSリファレンス > tansition-delay

概要

属性名 tansition-delay
値 <time> [, <time> ]*
初期値all
適用可能要素すべての要素 (::before, ::after を含む)
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS3104(-moz)
16		1.0(-webkit)
26		11.5(-o)
12.1		3.1(-webkit)
6.1

説明

トランジションを開始するまでの遅延時間を指定します。トランジションに関する詳細は transition を参照してください。

値説明
<time> 0.2s や 200ms など、変化を開始するまでの遅延時間を指定します。

使用例

下記の例は、.test クラスの要素にマウスを乗せた(:hover)際、0.5秒の遅延時間の後、横幅(width)を 0.2秒かけてリニア(linear)に 300px に広げています。

CSS
.test {
  width: 100px;
  height: 30px;
  background: #f66;
  transition-property: width;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0.5s;
}
.test:hover {
  width: 300px;
}
HTML
<div class="test"></div>
表示

関連項目

transition, transition-property, transition-duration, transition-timing-function, transition-delay

リンク

Copyright (C) 2016 杜甫々
初版：2016年1月3日、最終更新：2016年1月3日
http://www.tohoho-web.com/css/prop/transition-duration.htm