変形、トランジション、アニメーション：CSS3プロパティは、アニメーションの制作上の3つのプロパティを持っています。変換および移行導入されており、ここでは、アニメーションのアニメーションを学ぶために来ます。CSS3ことで、私たちはアニメーションを作成することができ、あなたは多くのウェブページ、フラッシュアニメーションやJavaScriptでアニメーション画像を置き換えることができます。
1キーフレームのキーフレーム
CSS3でアニメーションを作成するために、我々は@keyframesルールを学ぶ必要があります。上述遷移遷移効果は、初期特性および最終的な特性を含む、生成され、開始作動時間実行動作時間および変換動作が継続率は、実際には、これらの値の中間値です。私たちがどのようなアクションを実行するために、このような私たちの最初の時間として、より慎重に制御したい場合は、どのようなアクションの第二の時間は、最初のフレームが何秒のフレームなどが行われるために何を実行するために言った上でのフラッシュのように（実行しますアクション）、トランジション、我々はコントロールに、このような「キーフレーム」を必要とする。この時点で達成することは困難であるそれはそう。「キーフレーム」このプロパティのCSS3アニメーションので、この効果を達成します。
中@keyframesの規定にアニメーション、CSSスタイルを作成するためのルールを@keyframes、あなたは徐々にアニメーションの現在のスタイルから変更新しいスタイルを作成することができます。次の形式を@keyframes：
アニメーション名を{@keyframes
から{
プロパティ：プロパティ値。
}
割合{
プロパティ：プロパティ値。
}
に{
プロパティ：プロパティ値。
}
}
若しくは
アニメーション名を{@keyframes
0％{
プロパティ：プロパティ値。
}
割合{
プロパティ：プロパティ値。
}
100％{
プロパティ：プロパティ値。
}
}
割合は、例えば、などを背景に、我々は、このような割合の数が多い、プロパティCSSプロパティ名を追加することができます値の割合残っている場合は、値が対応するプロパティの属性値です。それは我々が0％と100％までからと対応していることを言及する価値があります。我々はまた、前にこれを述べました。
簡単な例の観点では、次の通り：
CSSアニメーションアニメーション効果は、アニメーションを通じて、要素のプロパティ値の変化を完全にアニメーションによって制御され、属性値がアニメーションの前後カバーになり、CSSに対応する要素の相対的な値に影響を与えます。上記の例のよう：我々は異なる期間であるという理由だけで、この場合、背景色とdiv要素の幅を変更し、そのデフォルト値は次のとおりです。幅：100pxに;背景：赤;しかし、私たちは「から」アニメーションの実装では、divの属性が起こります変更：幅：100pxに、背景：赤50％に、実行されたとき、属性は次のようになる。幅：200pxの、背景：青、アニメーション実行「から」プロパティの変更：幅：400ピクセル、背景：緑;この時点では、アニメーションが完了することになる、2つのプロパティの幅と背景の値が「に」、彼は相乗効果を生成しませんが、時間にして、再度CSSプロパティの最初の出現をカバーする前に基づいています。いつものCSSとして、最後に出現するルートに右のように最大です。映画の両端には、デフォルトのスタイルの効果に戻ったとき。以下、図1に示すように、アニメーション処理のスクリーンショットです。
図1アニメーションアニメーション実行
2アニメーションアニメーションプロパティ
アニメーションアニメーションは、表1-32属性：
そして、特性を表1-32アニメーションで説明します
アニメーションアニメーションプロパティが必要とオプションの属性が含まれています。アニメーション名（アニメーションの名前）、アニメーション時間（アニメーションの持続時間）、アニメーション再生状態（再生状態）、及び残りのプロパティを含む必要な属性はオプションです。
テーブルの上にプロパティを設定するために、我々は個別に設定することができます。アニメーション曲線の所定の速度でアニメーションタイミング機能をここ。アニメーションが加速され、その後減速ように、アニメーションの速度曲線「やす・イン・アウト」を変更、改変ラップCSSコードは次の通りであります：
アニメーションプロパティの残りの部分も設定されている読者が興味を持っている、あなたはアニメーションを理解するために、各属性のアニメーションに対して異なる値を設定することができます。