Tbpgr Blog

Employee Experience Engineer tbpgr（てぃーびー） のブログ

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

css3

パンくず

CSS3新要素
時間的変化
transition-timing-function

概要

変化のタイミング・進行割合を指定するtransition-timing-functionについて説明します

プロパティ名

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

設定値

項目名 設定値 cubic-bezier
ease 開始と完了を滑らかに（初期値） cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear 一定 cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in ゆっくり始まる cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out ゆっくり終わる cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out ゆっくり始まってゆっくり終わる cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier(x1, y1, x2, y2) 3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定する ーー

内容

変化のタイミング・進行割合を指定する

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>transition-property</title>
    <style type="text/css">
    div.container {
    }
    
    div.transition-common {
      background-color:skyblue; width:100px; height:75px;font-size:12px;
      transition-property: background-color, width, height;
      transition-duration:2s;
      -webkit-transition-property: background-color, width, height;
      -webkit-transition-duration:2s;
      -o-transition-property: background-color, width, height;
      -o-transition-duration:2s;
      -moz-transition-property: background-color, width, height;
      -moz-transition-duration:2s;
      -ms-transition-property: background-color, width, height;
      -ms-transition-duration:2s;
    }
    
    div.transition-property1 {
      // transition-timing-functionの指定なし＝ease
    }
    
    div.transition-property2 {
      transition-timing-function:linear;
      -webkit-transition-timing-function:linear;
      -o-transition-timing-function:linear;
      -moz-transition-timing-function:linear;
      -ms-transition-timing-function:linear;
    }
    
    div.transition-property3 {
      transition-timing-function:ease-in;
      -webkit-transition-timing-function:ease-in;
      -o-transition-timing-function:ease-in;
      -moz-transition-timing-function:ease-in;
      -ms-transition-timing-function:ease-in;
    }
    
    div.transition-property4 {
      transition-timing-function:ease-out;
      -webkit-transition-timing-function:ease-out;
      -o-transition-timing-function:ease-out;
      -moz-transition-timing-function:ease-out;
      -ms-transition-timing-function:ease-out;
    }
    
    div.transition-property5 {
      transition-timing-function:ease-in-out;
      -webkit-transition-timing-function:ease-in-out;
      -o-transition-timing-function:ease-in-out;
      -moz-transition-timing-function:ease-in-out;
      -ms-transition-timing-function:ease-in-out;
    }

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

    div.transition-property2:hover {
      background-color:yellow; width:400px; height:125px; font-size:20px;
    }    
    
    div.transition-property3:hover {
      background-color:yellow; width:400px; height:125px; font-size:20px;
    }    
    
    div.transition-property4:hover {
      background-color:yellow; width:400px; height:125px; font-size:20px;
    }    
    
    div.transition-property5:hover {
      background-color:yellow; width:400px; height:125px; font-size:20px;
    }    
    </style>
  </head>
  <body>
  <div class="container">
    <div class="transition-property1 transition-common">テスト(ease default)</div>
    <div class="transition-property2 transition-common">テスト(linear)</div>
    <div class="transition-property3 transition-common">テスト(ease-in)</div>
    <div class="transition-property4 transition-common">テスト(ease-out)</div>
    <div class="transition-property5 transition-common">テスト(ease-in-out)</div>
  </div>
  </body>
</html>