WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「トランジションのディレイ」

transition-delay 「変化開始までの時間」

transition」はアニメーションの1つでCSS3.0で追加されました。
「transition-delay」は変化の開始までの時間を指定します。

CSS Ver.適用要素継承
3.0 全要素なし
広告

transition-delayの指定方法

構文

transition-delay : 秒数;

プロパティ/設定値意味
transition-delay : 秒数 変化開始までの時間(時間が経ってから変化が開始)の時間
形式:1s(小数指定も可能)
指定しない場合は「0s」となる
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

transition-delayのサンプル


<style type="text/css">
.s1{
  width            : 50px;
  height           : 40px;
  background-color : blue;
  transition-property        : 下記のセレクトボックスで指定
  transition-duration        : 下記のセレクトボックスで指定
  transition-timing-function : 下記のセレクトボックスで指定
  transition-delay           : 下記のセレクトボックスで指定
}
/* このサンプルは「width」「background-color」を変化対象としています */
/* マウスを合わせると変化します */
.s1:hover {
  width            : 280px;
  background-color : red;
}
</style>

<!-- html -->
<div class="s1" id="moveSample1">ABC</div>
transitionプロパティ設定値
変化対象のCSS
transition-property
変化の時間
transition-duration
変化の速度
transition-timing-function
変化開始までの時間
transition-delay
指定した値のtaransition構文
transition指定なし

↓マウスを合わせると、指定条件で変化します。

ABC
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン