CSS transition アニメーションするサンプル

CSSのtransitionプロパティで、アニメーションするサンプルです。

確認環境
・Google Chrome

目次

仕様 transitionのプロパティの仕様
サンプル transitionのサンプル

transitionのプロパティの仕様

transition:値1 値2 値3 値4

transitionプロパティは、アニメーションします。
トランジション(transition)は、推移や変遷という意味です。

引数は、4つあります。

説明
値1(変化させるプロパティ名) 変化させるプロパティ名を指定します。例:background-color
all・・・適用できるすべてのプロパティを変化させます。(初期値)
none・・・変化するプロパティなし。
値2(変化を終えるまでの時間) 数値+s・・・秒です。(初期値は0秒)
数値+ms・・・ミリ秒です。
値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(始まるまでの時間) 数値+s・・・秒です。(初期値は0秒)
数値+ms・・・ミリ秒です。

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

transitionのサンプル

transitionプロパティのサンプルです。

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

カーソルをボックスの中に置くと、ボックスが横に広がります。

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

コード

上記サンプルのコードです。

<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プロパティの指定とhover時のwidthを指定しています。

関連の記事

CSS border-radius 四角の角を丸くするサンプル
CSS box-shadow ボックスに影をつけるサンプル
CSS text-shadow 文字に影をつけるサンプル
CSS opacity 透明度を指定するサンプル
CSS linear-gradient 線のグラデーションのサンプル
CSS radial-gradient 円のグラデーションのサンプル

△上に戻る