スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

このブログでも多用しているtransitionですが、変化の仕方を表すtransition-timing-functionについては、違いが分からないという人もいるのではないでしょうか?

transition-timing.png

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

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

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

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

マウスを乗せてみてください
ease
linear
ease-in
ease-out
ease-in-out

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

html
<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」になります。

CSS
#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;
}

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

マウスを乗せてみてください
ease
linear
ease-in
ease-out
ease-in-out

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

マウスを乗せてみてください
ease
linear
ease-in
ease-out
ease-in-out

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

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。