検証・対応ブラウザ
| 機器 |
ブラウザ・バージョン |
| 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/
