Edited at

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

More than 1 year has passed since last update.


検証・対応ブラウザ

機器
ブラウザ・バージョン

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/