CSS トランジション効果(アニメーション効果)を出すサンプル(transition)

CSSのトランジション効果(アニメーション効果)を出すサンプルです。
transitionプロパティについてです。

トランジションとは、
例えば背景色の変更を指定した時、通常は即座に切り替わりますが、トランジションを指定すると時間を掛けて切り替わるようになります。

transition プロパティ

transition : 値1 値2 値3 値4

値1 : transition-property (変化させるCSSプロパティ)
値1	説明
プロパティ名	変化させるプロパティ名を指定します。例：background-color
all	適用できるすべてのプロパティを変化させます。(初期値)
none	変化するプロパティなし。

値2 : transition-duration (変化を終えるまでの時間)
値2	説明
数値+s	秒です。(初期値は0秒)
数値+ms	ミリ秒です。

値3 : transition-timing-function (変化するパターン)
値3	説明
ease	ゆっくり>加速>減速します。(初期値)
linear	一定の速度で変化します。
ease-in	ゆっくり>加速します。
ease-out	高速>減速します。
ease-in-out	ゆっくり>徐々に加速>減速します。
step-start	steps(1,start)と同じです。
step-end	steps(1,end)と同じです。
steps関数	steps(ステップ数,start or end) ステップ数は何ステップで変化するかを表します。 startはカーソルをのせた瞬間から変化し始めます。 endはカーソルを載せて一定時間経過後から変化し始めます。
cubic-bezier	3次ベジェ曲線を使って指定します。 cubic-bezier(数値,数値,数値,数値) 数値は0～1です。

値4 : transition-delay (始まるまでの時間)
値4	説明
数値+s	秒です。(初期値は0秒)
数値+ms	ミリ秒です。

トランジション効果を設定します。
以下はMDNのtransitionプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/transition

サンプル

transitionプロパティのサンプルです。
カーソルをボックスの中に置いて下さい。

1.ease

2.linear

3.ease-in

4.ease-out

5.ease-in-out

6.steps(5,start)

7.steps(5,end)

8.cubic-bezier

コード

上記サンプルのコードです。
transitionプロパティの指定とhover時のwidthを指定しています。

<style>
#d1{background-color:LavenderBlush;
	transition:width 3s ease 5ms;
}
#d1:hover{
	width:300px;
}
#d2{
	background-color:Honeydew;
	transition:width 3s linear 5ms;
}
#d2:hover{
	width:300px;
}
#d3{
	background-color:LightCyan;
	transition:width 3s ease-in 5ms;
}
#d3:hover{
	width:300px;
}
#d4{background-color:LavenderBlush;
	transition:width 3s ease-out 5ms;
}
#d4:hover{
	width:300px;
}
#d5{
	background-color:Honeydew;
	transition:width 3s ease-in-out 5ms;
}
#d5:hover{
	width:300px;
}
#d6{
	background-color:LightCyan;
	transition:width 3s steps(5,start) 5ms;
}
#d6:hover{
	width:300px;
}
#d7{
	background-color:LavenderBlush;
	transition:width 3s steps(5,end) 1s;
}
#d7:hover{
	width:300px;
}
#d8{
	background-color:Honeydew;
	transition:width 3s cubic-bezier(0.1, 0.5, 0.7, 0.1) 1s;
}
#d8:hover{
	width:300px;
}
#dd div{border:1px solid black;width:200px;}
</style>
<body >
<div id="dd">
	<div id="d1"><p>1.ease</p></div>
	<div id="d2"><p>2.linear</p></div>
	<div id="d3"><p>3.ease-in</p></div>
	<div id="d4"><p>4.ease-out</p></div>
	<div id="d5"><p>5.ease-in-out</p></div>
	<div id="d6"><p>6.steps(5,start)</p></div>
	<div id="d7"><p>7.steps(5,end)</p></div>
	<div id="d8"><p>8.cubic-bezier</p></div>
</div>
</body>