CSS3キーフレームアニメーションで%毎の時間指定は出来ない

仕様

仕様で定義されている以上のことは不可
・一見すると何でも出来そうな「CSS3キーフレームアニメーション」
・しかし、仕様で定義されている以上のことは当然出来ない

---

基本的な考え方

1.任意のキーフレームアニメーション名を指定

@keyframes 任意のキーフレーム名;

2.指定した「キーフレームアニメーション」全体を実行する秒数を指定

animation-duration: 秒数s;

3.指定した「キーフレームアニメーション」実行内容を、進捗度%で指定
※ここで「animation-duration: 秒数s;」を指定することは出来ない

@keyframes 任意のキーフレーム名 {

	0% {プロパティ名: 値;}

	50% {プロパティ名: 値;}

	70% {プロパティ名: 値;}

	90% {プロパティ名: 値;}

	100% {プロパティ名: 値;}

}

---

結論

アニメーション実行時間指定
・全体に対してしか適用されない