CSS3 transition をテーブルでまとめてみた #CSS3

検証・対応ブラウザ

機器	ブラウザ・バージョン
windows	IE9以上、Chrome最新、Firefox最新
mac	Safari最新、Chrome最新、Firefox最新
スマホ	iOS7以上、Android4.1以上

transition …… transition効果（時間的変化）をまとめて指定する

transitionプロパティ	transition-property	transition-duration	transition-timing-function	transition-delay
プロパティ	CSSプロパティ名	変化に掛かる時間を指定	変化のタイミング・進行割合を指定	変化がいつ始まるか
初期値	all	0	ease	0

・transition-property

transition-property	CSSプロパティ名
値	background-color, width, height など

・transition-duration

transition-duration	変化に掛かる時間を指定
値	0.5s, 1s, 5s など

・transition-timing-function

transition-timing-function	変化のタイミング・進行割合を指定
ease	開始と完了を滑らかにする
linear	一定
ease-in	ゆっくり始まる
ease-out	ゆっくり終わる
ease-in-out	ゆっくり始まってゆっくり終わる
cubic-bezier(数値, 数値, 数値, 数値)	3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定

・transition-delay

transition-delay	変化がいつ始まるか
値	0.5s, 1s, 5s など

使用例

<!doctype html>
<html lang="ja">
<meta charset="UTF-8">
<style>
.sample {
  width:200px;
  height:50px;
  background: red;
  transition: width 1s ease 0.1s;/*←transitionの使用例*/
}
.sample:hover {
  width:400px;
  height:100px;
}
</style>
<body>
<div class="sample">transitionの使用例</div> 
</body>
</html>

使用例（ベンダープレフィックスを付けた場合）

<!doctype html>
<html lang="ja">
<meta charset="UTF-8">
<style>
.sample {
  width:200px;
  height:50px;
  background: red;
  -webkit-transition: width 1s ease 0.1s;
  transition: width 1s ease 0.1s;/*←transitionの使用例*/
}
.sample:hover {
  width:400px;
  height:100px;
}
</style>
<body>
<div class="sample">transitionの使用例</div> 
</body>
</html>

使用例（複数付けた場合）

<!doctype html>
<html lang="ja">
<meta charset="UTF-8">
<style>
.sample {
  width:200px;
  height:50px;
  background: red;
  transition:  background 1s ease 0.1s, width 1s ease 0.1s, height 1s ease 0.1s, color 1s ease 0.1s ;/*←transitionの使用例*/
}
.sample:hover {
  background: blue;
  width:400px;
  height: 150px;
  color: #fff;
}
</style>
<body>
<div class="sample">transitionの使用例</div> 
</body>
</html>

各ブラウザ：ベンダープレフィックス検証
http://caniuse.com/#search=transition

参考元URL
http://www.htmq.com/css3/transition.shtml
http://www.css-lecture.com/log/css3/css3-transition.html
http://scene-live.com/page.php?page=76
http://11neko.com/css3-transition/