トランジションの速度のパターンを設定する

transtion-timing-functionプロパティを使うと、変化する速度のパターンをしていできます。キーワード、step関数、cubic-bezier関数のいずれかで指定する。

transtion-timing-functionプロパティ
設定値	説明
ease	cubic-bezier(0.25,0.1,0.25,1)を指定したときと同じ
linear	cubic-bezier(0,0,1,1)を指定したときと同じ
ease-in	cubic-bezier(0.42,0,1,1)を指定したときと同じ
ease-out	cubic-bezier(0,0,0.58,1)を指定したときと同じ
ease-in-out	cubic-bezier(0.42,0,0.58,1)を指定したときと同じ
step-start	step(1,start)を指定したときと同じ
step-end	step(1,end)を指定したときと同じ

steps(ステップ数,startまたは、end)

step関数では、指定した回数で、等間隔に分割して変化するようにします。

第１引数：何段階(ステップ)で変化するかを１以上の整数で指定
第２引数：「start」か「end」を指定

「start」を指定すると始点(開始時)に最初のステップ(変化)が起こり。
「end」をシチエすると終点(完了時)に最後のステップ(変化)が起きます。
第２引数を指定すると、「end」が指定されたとみなします。

cubic-bezie

３次ベジエ曲線でググッて下さい。

トランジションを遅れて開始させる

transition-delayプロパティを利用すると、変化を遅れて発生させることができます。

値の指定方法　transition-delay:時間;　と書きます。

プロパティの値が変更されてから変化が始まるまでの待機時間を、秒(s)かミリ秒(ms)で指定します。負の値を指定すると、指定した時間分変化した場合のポイントからすぐ開始されます。「-5s」と書いたら、開始から５秒後のところから始まります。
複数プロパティの待機時間を変えて変化させたいときは、それぞれに対応する時間を
「,」カンマで区切って書きます。

トランジションプロパティを一括設定

トランジションのプロパティを一括指定するには、transitionプロパティを利用します。それぞれの値を任意の順番で、半角スペースで区切って指定します。

注意点があって、transition-durationプロパティ、transition-delayプロパティの値については、１つ目に指定されている値がtransition-durationプロパティの値、２つめに指定されている値がtransition-delayの値とみなされます。省略した値については初期値が適用されます。

transiton:width 3s 1s ease; とかけば、
transtion-duration:3s,transition-delay:1sという意味になります。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>トランジションの速度のパターンを指定する</title>
	<style>
	*{margin:0;padding:0;}
	.container{
		width:960px;
		height:480px;
	}
	div{
		width:32px;
		height:20px;
		overflow:hidden;
	}

	.traWidth{
		-webkkit-transition-property:width;
		transition-property:width;
	}
	.traWidth:hover{width:480px;}

	.traDur1s{
		-webkit-transition-duration:1s;
		transition-duration:1s;
	}
	.traDur3s{
		-webkit-transition-duration:3s;
		transition-duration:3s;
	}
	.traDur5s{
		-webkit-transition-duration:5s;
		transition-duration:5s;
	}

	.bgYellow{background-color:yellow;}
	.bgSilver{background-color:silver;}
	.bgOrange{background-color:orange;}

	.ease{
		-webkit-transition-timing-function:ease;
		transition-timing-function:ease;
	}
	.linear{
		-webkit-transition-timing-function:linear;
		transition-timing-function:linear;
	}
	.ease-in{
		-webkit-transition-timing-function:ease-in;
		transition-timing-function:ease-in;
	}
	.ease-out{
		-webkit-transition-timing-function:ease-out;
		transition-timing-function:ease-out;
	}
	.ease-in-out{
		-webkit-transition-timing-function:ease-in-out;
		transition-timing-function:ease-in-out;
	}
	.step-start{
		-webkit-transition-timing-function:step-start;
		transition-timing-function:step-start;
	}
	.step-end{
		-webkit-transition-timing-function:step-end;
		transition-timing-function:step-end;
	}

	.step-4-start{
		-webkit-transition-timing-function:step(4,start);
		transition-timing-function:step(4,start);
	}
	.step-4-end{
		-webkit-transition-timing-function:step(4,end);
		transition-timing-function:step(4,end);
	}
	.cubicBezie{
		-webkit-transition-timing-function:cubic-bezier(0.1,0.6,0.8,0.9);
		transition-timing-function:cubic-bezier(0.1,0.6,0.8,0.9);
	}
	.traDelay300ms{
		-webkit-transition-delay:300ms;
		transition-delay:300ms;
	}

	p{font-size:16px;font-family:"メイリオ","serif";}
	</style>

</head>
<body>
	<p>下の色がついている箇所にカーソルを乗せると・・・</p>
	<div class="container">
		<p>transition-timing-function:ease</p>
			<div class="traWidth traDur1s bgYellow ease"></div>
		<p>transition-timing-function:linear,transition-delay:300ms</p>
			<div class="traWidth traDur1s bgSilver linear traDelay300ms"></div>
		<p>transition-timing-function:ease-in</p>
			<div class="traWidth traDur1s bgOrange ease-in"></div>
		<p>transition-timing-function:ease-out</p>
			<div class="traWidth traDur1s bgYellow ease-out"></div>
		<p>transition-timing-function:ease-in-out</p>
			<div class="traWidth traDur1s bgSilver ease-in-out"></div>

		<p>transition-timing-function:step-start</p>
			<div class="traWidth traDur1s bgOrange step-start"></div>
		<p>transition-timing-function:step-end</p>
			<div class="traWidth traDur1s bgYellow step-end"></div>

		<p>transition-timing-function:step(4,start)</p>
			<div class="traWidth traDur5s bgOrange step-4-startt"></div>
		<p>transition-timing-function:step(4,end)</p>
			<div class="traWidth traDur5s bgYellow step-4-end"></div>

		<p>transition-timing-function:cubic-bezier(0.1,0.6,0.8,0.9)</p>
			<div class="traWidth traDur1s bgSilver cubicBezie"></div>

	</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

<!DOCTYPE html>

<head>

<title>トランジションの速度のパターンを指定する</title>

<style>

*{margin:0;padding:0;}

.container{

width:960px;

height:480px;

}

div{

width:32px;

height:20px;

overflow:hidden;

}

.traWidth{

-webkkit-transition-property:width;

transition-property:width;

}

.traWidth:hover{width:480px;}

.traDur1s{

-webkit-transition-duration:1s;

transition-duration:1s;

}

.traDur3s{

-webkit-transition-duration:3s;

transition-duration:3s;

}

.traDur5s{

-webkit-transition-duration:5s;

transition-duration:5s;

}

.bgYellow{background-color:yellow;}

.bgSilver{background-color:silver;}

.bgOrange{background-color:orange;}

.ease{

-webkit-transition-timing-function:ease;

transition-timing-function:ease;

}

.linear{

-webkit-transition-timing-function:linear;

transition-timing-function:linear;

}

.ease-in{

-webkit-transition-timing-function:ease-in;

transition-timing-function:ease-in;

}

.ease-out{

-webkit-transition-timing-function:ease-out;

transition-timing-function:ease-out;

}

.ease-in-out{

-webkit-transition-timing-function:ease-in-out;

transition-timing-function:ease-in-out;

}

.step-start{

-webkit-transition-timing-function:step-start;

transition-timing-function:step-start;

}

.step-end{

-webkit-transition-timing-function:step-end;

transition-timing-function:step-end;

}

.step-4-start{

-webkit-transition-timing-function:step(4,start);

transition-timing-function:step(4,start);

}

.step-4-end{

-webkit-transition-timing-function:step(4,end);

transition-timing-function:step(4,end);

}

.cubicBezie{

-webkit-transition-timing-function:cubic-bezier(0.1,0.6,0.8,0.9);

transition-timing-function:cubic-bezier(0.1,0.6,0.8,0.9);

}

.traDelay300ms{

-webkit-transition-delay:300ms;

transition-delay:300ms;

}

p{font-size:16px;font-family:"メイリオ","serif";}

</style>

</head>

<body>

<p>下の色がついている箇所にカーソルを乗せると・・・</p>

<p>transition-timing-function:ease</p>

<p>transition-timing-function:linear,transition-delay:300ms</p>

<p>transition-timing-function:ease-in</p>

<p>transition-timing-function:ease-out</p>

<p>transition-timing-function:ease-in-out</p>

<p>transition-timing-function:step-start</p>

<p>transition-timing-function:step-end</p>

<p>transition-timing-function:step(4,start)</p>

<p>transition-timing-function:step(4,end)</p>

<p>transition-timing-function:cubic-bezier(0.1,0.6,0.8,0.9)</p>

</div>

</body>

</html>