Help us understand the problem. What is going on with this article?

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

More than 3 years have 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/

a-hikkoshi
当社は、親会社である株式会社エイチームの経営理念をそのままに、引越しの比較サービス開始以降、大切にしてきた「三方よし」の理念を基本として、世の中に求められるサービスの創造を目指します。 一緒に働けるエンジニアを募集しております。下記URLよりご応募ください。 https://bit.ly/3lwf7QJ
https://hikkoshi.a-tm.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away