CSS トランジション効果(アニメーション)のサンプル

CSSのトランジション効果(アニメーション効果)のサンプルです。
transitionプロパティを使用します。

確認環境
・Google Chrome
・Windows 10

目次

トランジションのサンプル

通常、CSSで背景色の変更を指定すると即座に切り替わりますが、
トランジションを使用するとアニメーションを伴っての切り替えのようなことができます。

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>

transitionのプロパティ

transitionのプロパティです。
引数は、4つあります。

transition : 値1  値2  値3  値4

1つめの引数の値1は、変化させるプロパティを指定します。

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

2つめの引数の値2は、変化を終えるまでの時間を指定します。

値2 説明
数値+s 秒です。(初期値は0秒)
数値+ms ミリ秒です。

3つめの引数の値3は、変化のパターンを指定します。

値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つめの引数の値4は、始まるまでの時間を指定します。

値4 説明
数値+s 秒です。(初期値は0秒)
数値+ms ミリ秒です。

以下はMDNのtransitionプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/transition

関連の記事

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

△上に戻る