さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS3】プロパティの値を変化させる(transition)

Pocket
LINEで送る

プロパティの値を動画のようにスムーズに変化させるプロパティ「transition」をご紹介します。

【使用例(css)】

p {
  -webkit-transition:all 2s linear;
  -o-transition:all 2s linear;
  transition:all 2s linear;
  font-size:medium;
  color:#FF0000;
  }

p:hover {
  font-size:x-large;
  color:#0000FF;
  }

【使用例(html)】

<p>テキストがスムーズに変化します</p>

上記の例では、<p>のテキストにマウスを当てると、文字サイズがmediumからx-largeへ、文字色が赤から青へ変化します。

【書式】

transition:[変化させるプロパティ] [変化にかける時間] [速度のパターン] [遅らせる時間];

スムーズに変化させるプロパティは、プロパティ名を指定するか「all」の指定で適応可能なプロパティ全てを指定します。時間は秒(s)、ミリ秒(ms)で指定します。

速度のパターンには以下のものがあります。

【速度のパターン】
linear → 一定の速度で変化
ease → 少し減速して開始、少し減速して終了
ease-in → 減速して開始
ease-out → 減速して終了
ease-in-out → 減速して開始、減速して終了

「遅らせる時間」は、プロパティの変化が開始されてから、値が実際に変化が開始されるまでの時差の時間を指定します。

transitionのプロパティを個別で指定する場合は以下のプロパティを利用します。

【個別指定のプロパティ】
transition-property → 変化させるプロパティを指定
transition-duration → 変化にかける時間を指定
transition-timing-function → 速度の変化パターン指定
transition-delay → 遅れて開始する時間を指定

【対応ブラウザ】
Opera10.5以降、Safari4以降、Chrome3以降

カテゴリー:HP制作, css

コメントを残す

コメント内容