アニメーションの速度のパターンを設定する

animation-timing-functionプロパティを使うと、アニメーションを実行する速度のパターンを指定できます。animation-timing-functionプロパティは、アニメーション全体ではなく、キーフレームごとに適用されます。なので@keyframes内の個々のキーフレーム内で指定されたanimation-timing-functionプロパティはそのキーフレームに対して適用されます。個々のキーフレームでanimation-timing-functionプロパティが指定されていない時は、アニメーション全体に対して指定されたanimation-timing-functionがそれぞれのキーフレームに適用されます。

animation-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

３次ベジエ曲線でググッて下さい。
説明すると非常に長い・・・・

アニメーションを遅れて開始させる

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

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

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

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

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

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

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

アニメーション実行する回数を指定する

トランジションとは違い、アニメーションは繰り返して実行することができます。繰り返しは、animation-iteration-countプロパティで指定します。初期値は「１」です。
１回実行して終了します。複数アニメーションを実行回数をかえて適用する場合は、それぞれに対応する回数を「,」カンマで区切って書きます。

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

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

	.aniWidth{
		-webkkit-animation-property:width;
		animation-property:width;
	}
	.aniWidth:hover{width:480px;}

	.aniDur1s{
		-webkit-animation-duration:1s;
		animation-duration:1s;
	}
	.aniDur3s{
		-webkit-animation-duration:3s;
		animation-duration:3s;
	}
	.aniDur5s{
		-webkit-animation-duration:5s;
		animation-duration:5s;
	}

	@-webkit-keyframes barMove{
		0%{left:0px;width: 0px;}
	   10%{left:0px;width:40px;}
	   50%{left:0px;width:120px;}
	   60%{left:0px;width:180px;}
	   90%{left:0px;width:250px;}
	  100%{left:0px;width:340px;}
	}
	@keyframes barMove{
		0%{left:0px;width: 0px;}
	   10%{left:0px;width:40px;}
	   50%{left:0px;width:120px;}
	   60%{left:0px;width:180px;}
	   90%{left:0px;width:250px;}
	  100%{left:0px;width:340px;}
	}
	.anime1{
		-webkit-animation-name:barMove;
				animation-name:barMove;
		-webkit-animation-iteration-count:infinite;
				animation-iteration-count:infinite;
	}

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

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

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

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

</head>
<body>
	<p>アニメーションのテスト</p>
	<div class="container">
		<p>animation-timing-function:ease</p>
			<div class="aniWidth aniDur5s bgYellow anime1 ease"></div>
		<p>animation-timing-function:linear,animation-delay:300ms</p>
			<div class="aniWidth aniDur5s bgSilver  anime1 linear aniDelay300ms"></div>
		<p>animation-timing-function:ease-in</p>
			<div class="aniWidth aniDur5s bgOrange anime1 ease-in"></div>
		<p>animation-timing-function:ease-out</p>
			<div class="aniWidth aniDur5s bgYellow anime1 ease-out"></div>
		<p>animation-timing-function:ease-in-out</p>
			<div class="aniWidth aniDur5s bgSilver anime1 ease-in-out"></div>

		<p>animation-timing-function:step-start</p>
			<div class="aniWidth aniDur5s bgOrange anime1 step-start"></div>
		<p>animation-timing-function:step-end</p>
			<div class="aniWidth aniDur5s bgYellow anime1 step-end"></div>

		<p>animation-timing-function:step(4,start)</p>
			<div class="aniWidth aniDur5s bgOrange anime1 step-4-startt"></div>
		<p>animation-timing-function:step(4,end)</p>
			<div class="aniWidth aniDur5s bgYellow anime1 step-4-end"></div>

		<p>animation-timing-function:cubic-bezier(0.1,0.6,0.8,0.9)</p>
			<div class="aniWidth aniDur5s bgSilver anime1 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

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

<!DOCTYPE html>

<head>

<title>アニメーションの速度のパターンを指定する</title>

<style>

*{margin:0;padding:0;}

.container{

width:960px;

height:480px;

}

div{

width:0px;

height:20px;

overflow:hidden;

}

.aniWidth{

-webkkit-animation-property:width;

animation-property:width;

}

.aniWidth:hover{width:480px;}

.aniDur1s{

-webkit-animation-duration:1s;

animation-duration:1s;

}

.aniDur3s{

-webkit-animation-duration:3s;

animation-duration:3s;

}

.aniDur5s{

-webkit-animation-duration:5s;

animation-duration:5s;

}

@-webkit-keyframes barMove{

0%{left:0px;width: 0px;}

10%{left:0px;width:40px;}

50%{left:0px;width:120px;}

60%{left:0px;width:180px;}

90%{left:0px;width:250px;}

100%{left:0px;width:340px;}

}

@keyframes barMove{

0%{left:0px;width: 0px;}

10%{left:0px;width:40px;}

50%{left:0px;width:120px;}

60%{left:0px;width:180px;}

90%{left:0px;width:250px;}

100%{left:0px;width:340px;}

}

.anime1{

-webkit-animation-name:barMove;

animation-name:barMove;

-webkit-animation-iteration-count:infinite;

animation-iteration-count:infinite;

}

.bgYellow{background-color:yellow;}

.bgSilver{background-color:silver;}

.bgOrange{background-color:orange;}

.ease{

-webkit-animation-timing-function:ease;

animation-timing-function:ease;

}

.linear{

-webkit-animation-timing-function:linear;

animation-timing-function:linear;

}

.ease-in{

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

animation-timing-function:ease-in;

}

.ease-out{

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

animation-timing-function:ease-out;

}

.ease-in-out{

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

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

}

.step-start{

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

animation-timing-function:step-start;

}

.step-end{

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

animation-timing-function:step-end;

}

.step-4-start{

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

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

}

.step-4-end{

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

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

}

.cubicBezie{

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

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

}

.aniDelay300ms{

-webkit-animation-delay:300ms;

animation-delay:300ms;

}

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

</style>

</head>

<body>

<p>アニメーションのテスト</p>

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

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

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

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

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

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

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

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

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

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

</div>

</body>

</html>