CSS アニメーション Transition_html/css_WEB-ITnose

以前のブラウザでは、リッチなページ テーブル効果を実現するために、一般的に FLASH がいくつかの小さなアニメーションを作成するために使用されていましたが、FLASH 自体はブラウザ自体にネイティブではないため、プラグインのサポートが必要でした。 ins、私のブラウザは真っ黒で、とても見苦しいです。

CSS3 時代の到来により、CSS3 アニメーションも誕生しました。優れた互換性 (IE9 以下は無視してください →_→ は自動的に無視されます) とパフォーマンスを備え、プラグインを使用せずに、スムーズな遷移を備えた Web ページを作成できます。インタラクションとクールな見事なアニメーション。 HTML5 と組み合わせると、興味深いゲームを作成することもできます。

CSS3 アニメーションは非常に強力ですが、簡単に言うと、実際には 2 つの CSS3 プロパティであり、1 つはトランジション、もう 1 つはアニメーションです。トランジションはアニメーションほど強力ではありませんが、それでも一部の要素をトランジションする場合には非常に役立ちます。

###Transition

構文: トランジション: プロパティ期間タイミング関数遅延; トランジション プロパティは、4 つのトランジション プロパティを設定するために使用される省略されたプロパティです。

• transition-property: を設定する CSS プロパティの名前を指定します。トランジションエフェクト。
• transition-duration: トランジション効果が完了するまでにかかる秒数またはミリ秒数を指定します。
• transition-timing-function: スピードエフェクトのスピードカーブを指定します。
• transition-lay: トランジション効果がいつ開始されるかを定義します。

##transition-property

• none: トランジション効果を取得するプロパティはありません。
• all: 変更されたすべての属性にトランジション効果が適用されます。
• プロパティ: トランジション効果を適用する CSS プロパティ名のリストを定義します。リストは幅、高さなど、カンマで区切られます。

例: 幅にはトランジション効果があります:

```bash