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 ミリ秒です。

サンプル

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>

関連の記事

CSS 背景色を指定するサンプル(background-color)
CSS 背景画像を指定するサンプル(background-image)
CSS 背景画像の繰り返し方法を指定するサンプル(background-repeat)
CSS3 枠線の角を丸くするサンプル(border-radius)
CSS3 ボックスに影をつけるサンプル(box-shadow)
CSS3 文字に影をつけるサンプル(text-shadow)
CSS3 透明度を指定するサンプル(opacity)
CSS3 線のグラデーションのサンプル(linear-gradient)
CSS3 円のグラデーションのサンプル(radial-gradient)

△上に戻る