CSS3のtransition-timing-functionの動きをサンプルで理解しよう

この場合、次の4つにプロパティをひとまとめにしています。

transition-property:all;
transition-duration:1s;
transition-timing-function:liner;
transition-delay:0;

ボーダーを「border:1px solid #000;」とひとまとめに指定するときと同じ感覚ですね。

今回transition-timing-functionの違いが分かりやすいサンプルを作ってみました。例のごとくIE以外のブラウザでご覧ください。

意味がないかもしれませんが、せっかくなので今回のサンプルのソースを載せて起きます。

<div id="transition">マウスを乗せてみてください
  <div id="ease">ease</div>
  <div id="linear">linear</div>
  <div id="ease-in">ease-in</div>
  <div id="ease-out">ease-out</div>
  <div id="ease-in-out">ease-in-out</div>
</div>

transitionはまとめて指定しています。transition-propertyとtransition-delayは省略しています。省略した場合、transition-propertyは「all」、transition-delayは「0s」になります。

#transition{
  width:510px;
  padding:10px 20px;
  background:#f1f6fc;
  border : 1px solid #92bbe4;
}
#transition div{
  width:100px;
  height:20px;
  color:#fff;
  background:#258;
  border-radius:5px;
  text-align:center;
  padding:3px 10px;
  margin:10px 0 10px 0;
}
#transition:hover div{
  margin:10px 0 10px 390px;
}
div#ease{
  -moz-transition:3s ease;
  -webkit-transition:3s ease;
  -o-transition:3s ease;
  -ms-transition:3s ease;
}
div#linear{
  -moz-transition:3s linear;
  -webkit-transition:3s linear;
  -o-transition:3s linear;
  -ms-transition:3s linear;
}
div#ease-in{
  -moz-transition:3s ease-in;
  -webkit-transition:3s ease-in;
  -o-transition:3s ease-in;
  -ms-transition:3s ease-in;
}
div#ease-out{
  -moz-transition:3s ease-out;
  -webkit-transition:3s ease-out;
  -o-transition:3s ease-out;
  -ms-transition:3s ease-out;
}
div#ease-in-out{
  -moz-transition:3s ease-in-out;
  -webkit-transition:3s ease-in-out;
  -o-transition:3s ease-in-out;
  -ms-transition:3s ease-in-out;
}

もうひとつサンプルを。今度は背景が変わります。

せっかくですので、あとひとつサンプルを。今度は背景が変わります。

ということで、5種類の変化の仕方を紹介しました。

今回は違いが分かりやすいよう3秒（最後だけ2秒）にしましたが、実際はもっと短い時間にすることが多いと思います。そうなれば違いも分かりにくくなりますが、使うからにはちゃんと理解したうえで使いたいものです。