サンプルでわかるtransition-timing-function変化の違い

先日、覚えましたCSS3のtransitionプロパティ。
まだ、試していなかった、transition-timing-functionの変化の違いをサンプルとともに備忘録として残してみました。 

※IE等、お使いのブラウザによっては、動作しない場合があります。

transition-timing-function

値
ease：開始と完了を滑らかにする（初期値）
linear：一定
ease-in：ゆっくり始まる
ease-out：ゆっくり終わる
ease-in-out：ゆっくり始まってゆっくり終わる
cubic-bezier(数値, 数値, 数値, 数値)：3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定

Sample.1

横にBoxを移動させて変化の違いを確認。

HTML

<div id="sample1">
  <p class="ease">ease(default)</p>
  <p class="linear">linear</p>
  <p class="ease-in">ease-in</p>
  <p class="ease-out">ease-out</p>
  <p class="ease-in-out">ease-in-out</p>
  <p class="cubic">cubic-bezier</p>
</div>

 

CSS

#sample1{
    font-size:14px;
    width:660px;
    background:#fff;
    border:#000 1px solid;
    margin-left:15px;
    margin-bottom:30px;
}
#sample1:hover{
    background:#ddd;
}
#sample1 p{
	background:#aaa;
	width:120px;
        padding:10px;
        margin:10px 0;
	transition-duration: 5s;
	-moz-transition-duration: 5s;
	-webkit-transition-duration: 5s;
}
#sample1:hover p{
	-moz-transform: translate(500px,0);
	-webkit-transform: translate(500px,0);
	transform: translate(500px,0);
}

.ease {
	transition-timing-function:ease ;
	-moz-transition-timing-function:ease ;
	-webkit-transition-timing-function:ease ;
}
.linear {
	transition-timing-function:linear ;
	-moz-transition-timing-function:linear ;
	-webkit-transition-timing-function:linear ;
}
.ease-in {
	transition-timing-function:ease-in ;
	-moz-transition-timing-function:ease-in ;
	-webkit-transition-timing-function:ease-in ;
}
.ease-out {
	transition-timing-function:ease-out ;
	-moz-transition-timing-function:ease-out ;
	-webkit-transition-timing-function:ease-out ;
}
.ease-in-out {
	transition-timing-function:ease-in-out ;
	-moz-transition-timing-function:ease-in-out ;
	-webkit-transition-timing-function:ease-in-out ;
}
.cubic {
	transition-timing-function:cubic-bezier(1,0,1,0);
	-moz-transition-timing-function:cubic-bezier(1,0,1,0);
	-webkit-transition-timing-function:cubic-bezier(1,0,1,0);
}

 

Sample.2

バックの色で変化の違いを確認。

HTML

<div id="sample2">
  <p class="ease">ease(default)</p>
  <p class="linear">linear</p>
  <p class="ease-in">ease-in</p>
  <p class="ease-out">ease-out</p>
  <p class="ease-in-out">ease-in-out</p>
  <p class="cubic">cubic-bezier</p>
</div>

 

CSS

#sample2{
	font-siza:14px;
    width:660px;
    background:#fff;
    border:#000 1px solid;
    margin-left:15px;
    margin-bottom:30px;
}

#sample2 p{
	background:#fff;
	padding:20px 0;
	text-align:center;
	width:660px;
        margin:10px 0;
	transition-duration: 5s;
	-moz-transition-duration: 5s;
	-webkit-transition-duration: 5s;
}
#sample2:hover p{
	background:#999;
}
.ease {
	transition-timing-function:ease ;
	-moz-transition-timing-function:ease ;
	-webkit-transition-timing-function:ease ;
}
.linear {
	transition-timing-function:linear ;
	-moz-transition-timing-function:linear ;
	-webkit-transition-timing-function:linear ;
}
.ease-in {
	transition-timing-function:ease-in ;
	-moz-transition-timing-function:ease-in ;
	-webkit-transition-timing-function:ease-in ;
}
.ease-out {
	transition-timing-function:ease-out ;
	-moz-transition-timing-function:ease-out ;
	-webkit-transition-timing-function:ease-out ;
}
.ease-in-out {
	transition-timing-function:ease-in-out ;
	-moz-transition-timing-function:ease-in-out ;
	-webkit-transition-timing-function:ease-in-out ;
}
.cubic {
	transition-timing-function:cubic-bezier(1,0,1,0);
	-moz-transition-timing-function:cubic-bezier(1,0,1,0);
	-webkit-transition-timing-function:cubic-bezier(1,0,1,0);
}

 

まとめ

今回は、transition-timing-functionの変化の違いを、サンプルを作成しながら確認しましたが、自分自身大変勉強になりました。
個人的には、ease(default)とease-in-outが使い易いかなと思いました。
cubic-bezierに関しては、色々な数値によって更に変化が得られます。
また今後、そちらに関しても試してみたいと思います。 

 

【参考リンク先】
transition-timing-function－CSS3リファレンス