Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

CSS3新要素 | 2D 3D 変形 | transition-property

パンくず

CSS3新要素
時間的変化
transition-property

概要

時間的変化の属性指定をするtransition-propertyについて説明します

プロパティ名

transition-property
※2012/03/28現在、ベンダープリフィックスが必要

設定値

項目名 設定値
all 全てのプロパティを対象とする
none 全てのプロパティを対象外とする
プロパティ名 対象となるプロパティ名のリストをカンマ( , )区切りで指定

内容

時間的変化の属性指定を行います

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>transition-property</title>
    <style type="text/css">
    div.container {
      position:absolute;
    }
    
    div.transition-property1 {
      position:relative;
      background-color:skyblue; width:100px; height:75px; top:0px; left:0px;font-size:12px;
      transition-property: background-color, width, height,top,left;
      transition-duration:3s;
      transition-timing-function:linear;
      transition-delay:3s;
      -webkit-transition-property: background-color, width, height,top,left;
      -webkit-transition-duration:3s;
      -webkit-transition-timing-function:linear;
      -webkit-transition-delay:3s;
      -o-transition-property: background-color, width, height,top,left;
      -o-transition-duration:3s;
      -o-transition-timing-function:linear;
      -o-transition-delay:3s;
      -moz-transition-property: background-color, width, height,top,left;
      -moz-transition-duration:3s;
      -moz-transition-timing-function:linear;
      -moz-transition-delay:3s;
      -ms-transition-property: background-color, width, height,top,left;
      -ms-transition-duration:3s;
      -ms-transition-timing-function:linear;
      -ms-transition-delay:3s;
    }

    div.transition-property1:hover {
      position:relative;
      background-color:yellow; width:400px; height:125px; top:100px; left:100px;font-size:20px;
    }

    div.transition-property2 {
      position:relative;
      background-color:skyblue; width:100px; height:75px; top:200px; left:0px;font-size:12px;
      transition-property: all;
      transition-duration:3s;
      transition-timing-function:linear;
      transition-delay:3s;
      -webkit-transition-property: all;
      -webkit-transition-duration:3s;
      -webkit-transition-timing-function:linear;
      -webkit-transition-delay:3s;
      -o-transition-property: all;
      -o-transition-duration:3s;
      -o-transition-timing-function:linear;
      -o-transition-delay:3s;
      -moz-transition-property: all;
      -moz-transition-duration:3s;
      -moz-transition-timing-function:linear;
      -moz-transition-delay:3s;
      -ms-transition-property: all;
      -ms-transition-duration:3s;
      -ms-transition-timing-function:linear;
      -ms-transition-delay:3s;
    }
    
    div.transition-property2:hover {
      position:relative;
      background-color:yellow; width:400px; height:125px; top:300px; left:100px;font-size:20px;
    }    
    </style>
  </head>
  <body>
  <div class="container">
    <div class="transition-property1">テスト(font-size以外を指定)</div>
    <div class="transition-property2">テスト(all指定)</div>
  </div>
  </body>
</html>

完成画面のキャプチャ

移動前

移動中1(font-sizeは指定に入っていないので即hover時のサイズになる)

移動中2(font-sizeは指定に入っているので少しずつhover時のサイズになる)