ホームページ > 記事 > ウェブフロントエンド > CSS3 アニメーションに関連するプロパティは何ですか?
アニメーション関連の属性には、transform、transform-origin、transition、「@keyframes」、アニメーション、アニメーション名、アニメーション期間、アニメーション遅延などが含まれます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
#css3 のアニメーションには、transform、transition、animationの 3 種類があります。
1、transform (2D/3D 変換属性)
説明 | CSS | |
---|---|---|
2D または 3D 変換に適した要素 | 3 | |
変換要素の位置を変更できます | 3 | |
3D 空間で要素をネストする方法を指定します | 3 | |
3D 要素がパースでどのように表示されるかを指定します | 3 | |
3D 要素の下部の位置を指定しますelement | 3 | |
画面に面していないときに要素を表示するかどうかを定義します | 3 |
2.transition (遷移属性)
Description | CSS | |
---|---|---|
このプロパティは、transition-property、transition-duration、transition-timing-functionの略です。 、移行遅延フォーム。 | 3 | |
トランジションに使用する CSS プロパティを設定します。 | 3 | |
トランジションの時間の長さを設定します。 | 3 | |
トランジションのタイミング関数を設定します。 | 3 | |
トランジションが開始される時刻を指定します。 | 3 |
3. アニメーション (アニメーション属性)
説明 | CSS | |
---|---|---|
アニメーションを定義します。アニメーションは @ で定義されます。 keyframes 名前はアニメーション名で使用されます。 | 3 | |
複合属性。オブジェクトに適用されるアニメーション効果を取得または設定します。 | 3 | |
オブジェクトに適用されるアニメーション名を取得または設定します。これはルール @keyframes と組み合わせて使用する必要があります。アニメーション名は @keyframes 定義によって決定されるため、 | #3animation-duration | |
3 | ##animation-timing-function | |
3 | animation-lay | |
3 | ##animation-iteration-count | オブジェクト アニメーションのループ時間の取得または設定 |
animation-direction | オブジェクト アニメーションが移動するかどうかの取得または設定ループ内の逆方向 | |
animation-play-state | オブジェクトアニメーションの状態を取得または設定します | |
例: |
(学習ビデオ共有:
css ビデオ チュートリアル)
以上がCSS3 アニメーションに関連するプロパティは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。