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

  • 2
    Like
  • 0
    Comment

検証・対応ブラウザ

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

This post is the No.19 article of セカイエ株式会社 Advent Calendar 2016