ホームページ > 記事 > ウェブフロントエンド > CSS3 アニメーションに関連する 4 つのプロパティは何ですか?
css3 は、アニメーションに関連する 4 つの属性を設定します: 1. Transform 属性、要素に 2D または 3D 変換を適用するために使用されます; 2. Transition 属性、トランジション効果を実現するために使用されます; 3. アニメーション属性、要素にバインドを与えるために使用されます。アニメーション; 4. 「@keyframes」はアニメーションのサイクルの動作を定義します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
一般に、CSS3 アニメーションのプロパティは、transform、transition、アニメーションの 3 つだけです。
transform
プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。
transition
このプロパティは、4 つの遷移プロパティを設定するための短縮プロパティです。
transition-property
transition-duration
このプロパティは、6 つのアニメーション プロパティを設定するための短縮プロパティです: <strong></strong>
## アニメーション属性は @keyframes ルールと一緒に使用する必要があります。アニメーションを作成します。
@keyframes
ルール<strong></strong>
@keyframes ルールを使用すると、アニメーションを作成できます。 アニメーション作成の原則は、ある CSS スタイル セットを別のスタイル セットに徐々に変更することです。
この CSS スタイルのセットは、アニメーション プロセス中に複数回変更できます。
変更が発生する時間をパーセンテージで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用して指定します。
0% はアニメーションの開始時間、100% はアニメーションの終了時間です。
ブラウザのサポートを最適化するには、常に 0% および 100% セレクターを定義する必要があります。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; -webkit-animation: mymove 5s infinite; /* Safari and Chrome */ } @keyframes mymove { 0% { top: 0px; left: 0px; background: red; } 25% { top: 0px; left: 100px; background: blue; } 50% { top: 100px; left: 100px; background: yellow; } 75% { top: 100px; left: 0px; background: green; } 100% { top: 0px; left: 0px; background: red; } } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% { top: 0px; left: 0px; background: red; } 25% { top: 0px; left: 100px; background: blue; } 50% { top: 100px; left: 100px; background: yellow; } 75% { top: 100px; left: 0px; background: green; } 100% { top: 0px; left: 0px; background: red; } } </style> </head> <body> <div></div> </body> </html>(学習ビデオ共有:
css ビデオ チュートリアル )
以上がCSS3 アニメーションに関連する 4 つのプロパティは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。