CSS3 アニメーションに関連する 4 つのプロパティは何ですか?-フロントエンドQ&A-php.cn

CSS3 アニメーションに関連する 4 つのプロパティは何ですか?

青灯夜游

リリース： 2022-01-17 18:49:45

オリジナル

2317 人が閲覧しました

css3 は、アニメーションに関連する 4 つの属性を設定します: 1. Transform 属性、要素に 2D または 3D 変換を適用するために使用されます; 2. Transition 属性、トランジション効果を実現するために使用されます; 3. アニメーション属性、要素にバインドを与えるために使用されます。アニメーション; 4. 「@keyframes」はアニメーションのサイクルの動作を定義します。

CSS3 アニメーションに関連する 4 つのプロパティは何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

一般に、CSS3 アニメーションのプロパティは、transform、transition、アニメーションの 3 つだけです。

transform プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。

transition このプロパティは、4 つの遷移プロパティを設定するための短縮プロパティです。

transition-property
transition-duration
#transition-timing-function

#animation

このプロパティは、6 つのアニメーションプロパティを設定するための短縮プロパティです: <strong></strong>

animation-name

animation-duration
animation-timing-function
animation-delivery
animation-iteration-count
animation-direction
## アニメーション属性は @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>