HTML5 & CSS3 リファレンス - transition-timing-function プロパティ（変化のタイミング・進行割合の指定）

CSS3: transition-timing-function プロパティ - 変化のタイミング・進行割合の指定

■ 概要

項　　目	説　　明
記述形式	セレクタ {transition-timing-function: 値 }
値の形式	ease，linear，ease-in，ease-out，ease-in-out，step-start，step-end， steps(数値, [，start \| end ] )，cubic-bezier(数値, 数値, 数値, 数値)
初期値	ease
対応ブラウザー	C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa5+
適用可能な要素	すべての要素，::before擬似要素，::after擬似要素
継　　承	しない

■ 解説

transition-timing-functionプロパティ は，変化のタイミング・進行割合を指定します。

指定できる値の形式は，以下のとおりです。

値	説　　明
ease	cubic-bezier(0.25, 0.1, 0.25, 1) に等しい関数です。
linear	cubic-bezier(0, 0, 1, 1) に等しい関数です。
ease-in	cubic-bezier(0.42, 0, 1, 1) に等しい関数です。
ease-out	cubic-bezier(0, 0, 0.58, 1) に等しい関数です。
ease-in-out	cubic-bezier(0.42, 0, 0.58, 1) に等しい関数です。
step-start	steps(1, start) に等しい関数です。
step-end	steps(1, end) に等しい関数です。
steps(数値, [，start \| end ] )	２つのパラメータでステップ関数を指定します。
cubic-bezier(数値, 数値, 数値, 数値)	３次ベジェ曲線（cubic-bezier）を指定します。数値は曲線パラメータ２点の座標で (x1, y1, x2, y2) です。

■ 使用例（ transition-timing-function プロパティの利用）

HTMLソース
CSS <head> ～ </head>	<style type="text/css"> <!-- div.sample { margin: 30px; padding: 20px; border: 2px solid #0000ff; } div.sample div{ width: 220px; color: #fff; background: #666; text-align: center; padding: 5px 10px; margin: 10px 0px; transition-duration: 3s; } div.sample:hover div{ width: 660px; } .ttfunc1 { transition-timing-function: ease; } .ttfunc2 { transition-timing-function: linear; } .ttfunc3 { transition-timing-function: ease-in; } .ttfunc4 { transition-timing-function: ease-out; } .ttfunc5 { transition-timing-function: ease-in-out; } --> </style>
HTML <body> ～ </body>	<div class="sample"> <p>マウスカーソルを青枠の内外に置いてください！</p> <div class="ttfunc1">ease を指定した場合</div> <div class="ttfunc2">linear を指定した場合</div> <div class="ttfunc3">ease-in を指定した場合</div> <div class="ttfunc4">ease-out を指定した場合</div> <div class="ttfunc5">ease-in-out を指定した場合</div> </div>

HTMLソース

CSS
<head> ～ </head>

<style type="text/css">
<!--
   div.sample {
      margin: 30px;
      padding: 20px;
      border: 2px solid #0000ff;
   }
   div.sample div{
      width: 220px;
      color: #fff;
      background: #666;
      text-align: center;
      padding: 5px 10px;
      margin: 10px 0px;
      transition-duration: 3s;
   }
   div.sample:hover div{ width: 660px; }
	
   .ttfunc1 { transition-timing-function: ease; }
   .ttfunc2 { transition-timing-function: linear; }
   .ttfunc3 { transition-timing-function: ease-in; }
   .ttfunc4 { transition-timing-function: ease-out; }
   .ttfunc5 { transition-timing-function: ease-in-out; }
-->
</style>

HTML
<body> ～ </body>

<div class="sample">
   <p>マウスカーソルを青枠の内外に置いてください！</p>
   <div class="ttfunc1">ease を指定した場合</div>
   <div class="ttfunc2">linear を指定した場合</div>
   <div class="ttfunc3">ease-in を指定した場合</div>
   <div class="ttfunc4">ease-out を指定した場合</div>
   <div class="ttfunc5">ease-in-out を指定した場合</div>
</div>

ブラウザー表示例
マウスカーソルを青枠の内外に置いてください！ ease を指定した場合 linear を指定した場合 ease-in を指定した場合 ease-out を指定した場合 ease-in-out を指定した場合

この例では，<div>要素の sampleクラス では，擬似クラス :hover を用いて，マウスカーソルの位置が変わると子要素の幅が変化するように指定しています。

■ 備考

【参考ページ】

「HTMLクイックリファレンス」の「transition-timing-function プロパティ」のページ
「ねこだまのCSSリファレンス&デモ」の「transition-timing-function プロパティ」のページ
「W3C」の「transition-timing-function プロパティ」のページ