Tbpgr Blog

Organization Development Engineer tbpgr（てぃーびー） のブログ

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

css3

パンくず

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

概要

変化に掛かる時間を指定するtransition-durationについて説明します

プロパティ名

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

内容

変化に掛かる時間を指定します

サンプル

duration:3s;とduration:1s;で比較します。

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>transition-duration</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:1s;
      transition-timing-function:linear;
      transition-delay:3s;
      -webkit-transition-property: all;
      -webkit-transition-duration:1s;
      -webkit-transition-timing-function:linear;
      -webkit-transition-delay:3s;
      -o-transition-property: all;
      -o-transition-duration:1s;
      -o-transition-timing-function:linear;
      -o-transition-delay:3s;
      -moz-transition-property: all;
      -moz-transition-duration:1s;
      -moz-transition-timing-function:linear;
      -moz-transition-delay:3s;
      -ms-transition-property: all;
      -ms-transition-duration:1s;
      -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">テスト(duration:3s;)</div>
    <div class="transition-property2">テスト(duration:1s;)</div>
  </div>
  </body>
</html>