WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「トランジションさせるプロパティ」

transition-property 「変化対象のCSSプロパティ」

transition」はアニメーションの1つでCSS3.0で追加されました。
「transition-property」は変化対象とするCSSのプロパティを指定します。

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

transition-propertyの指定方法

構文

transition-property : all | none | CSSプロパティ;

プロパティ/設定値意味
transition-property : all 全てのCSSプロパティを変化の対象とします
指定しない場合は「all」となる
transition-property : none 全てのCSSプロパティを変化の対象外とします
transitionを指定していないのと同じ扱い
transition-property : cssプロパティ

複数の変化対象がある場合に、特定のプロパティをtransitionの対象としたい場合に指定します。

下記サンプルでは「width」「background-color」が変化の対象となっていますが、transition-propertyで"width"と指定をした場合は、transition「時間的変化」の対象は「wdith」のみとなります。

(注)transition-propertyで指定されないプロパティは、時間的変化の対象とならいだけで変化は行われます。

デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

transition-property のサンプル


<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 株式会社シーマン