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

transition 「時間的変化」

「transition」は時間や速度を指定したCSSプロパティの値を変化させる事が出来ます。
アニメーションの1つで、カーソルイン(:hover)のタイミングで変化を与えたりします。

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

transitionの指定方法

「transition」は「transition-property」「transition-duration」「transition-timing-function」「transition-delay」をまとめて指定するショートハンド(複数のプロパティをまとめて指定)です。

構文

transition : [変化対象CSS] [変化時間] [変化速度] [変化開始時間];

プロパティ/設定値意味
変化対象CSS transition-propertyの値を設定
指定しない場合は「all」となる
変化時間 transition-durationの値を設定
指定しない場合は「0s」となる
変化速度 transition-timing-functionの値を設定
指定しない場合は「ease」となる
変化開始時間 transition-delayの値を設定
指定しない場合は「0s」となる
複数指定する場合は、カンマで区切ります。
ページTOP

transition のサンプル


<style type="text/css">
/* --- サンプル用の共通枠 --------------------------- */
.sampleDiv {
  display         : table;
  border-collapse : separate;
  border-spacing  : 3px 0;
}
.sampleDiv div {
  display         : table-cell;
  width           : 80px;
  height          : 40px;
  text-align      : center;
  vertical-align  : middle;
  font-weight     : bolder;
}
/* --- (1) 背景色のみゆっくり変化 ------------------- */
.s1{
  color            : red;
  background-color : blue;
  transition     : background-color 1s ease-in-out 0s;
}
.s1:hover {
  color            : white;
  background-color : red;
}

/* --- (2) 背景色が変化後に文字色変化 --------------- */
.s2{
  color            : red;
  background-color : blue;
  transition     : background-color 1s ease-in-out 0s , color 1s ease 1.5s;
}
.s2:hover {
  color            : white;
  background-color : red;
}

/* --- (3) 省略(背景色・文字色共にゆっくり変化) --- */
.s3{
  color            : red;
  background-color : blue;
  transition     : 2s;
}
.s3:hover {
  color            : white;
  background-color : red;
}
</style>

<!-- html -->
<div class="sampleDiv">
  <div class="s1">(1)ABC</div>
  <div class="s2">(2)ABC</div>
  <div class="s3">(3)ABC</div>
</div>
(1)ABC
(2)ABC
(3)ABC
ページTOP

transition の自由に指定できるサンプル

<style type="text/css">
.s9{
  width            : 50px;
  height           : 40px;
  background-color : blue;
  transition      : 下記のセレクトボックスで指定
}
.s9:hover {
  width            : 280px;
  background-color : red;
}
</style>

<!-- html -->
<div class="s9" id="moveSample1">ABC</div>
transitionプロパティ設定値
transition-property
transition-duration
transition-timing-function
transition-delay
指定した値のtaransition構文
transition指定なし

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

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