アニメーション名属性を使用してアニメーションを呼び出すにはどうすればよいですか? CSSアニメーションの使い方ガイド

CSS スタイルでは、アニメーションを使用する前に、@keyframes を使用してアニメーションを定義する必要があります。ただし、キーフレームを使用して定義されたアニメーションは、実際にはアニメーションの効果を実現するために必要です。 CSS スタイルでは、アニメーション名属性を使用してアニメーションを呼び出す方法をまとめてみましょう。 CSS アニメーションの使用法の完全なリスト。

アニメーション効果を理解する前に、まずアニメーション名属性を理解する必要があります:

アニメーション名属性の構文: アニメーション-name: アニメーション名;

注: アニメーション名属性を使用してダイアログを定義する場合は、同じ名前に名前を付けるためにキーフレームを使用する必要があります。矛盾がある場合は、大文字と小文字を区別する必要があります。他のブラウザとの互換性を保つために、先頭に Webkit プレフィックスを追加できます。

コードは次のとおりです:

<style type="text/css">
        @-webkit-keyframes mycolor
        {
            0%{background-color:red;}
            30%{background-color:blue;}
            60%{background-color:yellow;}
            100%{background-color:green;}
        }
        @-webkit-keyframes mytransform
        {
            0%{border-radius:0;}
            50%{border-radius:50px; -webkit-transform:translateX(0);}
            100%{border-radius:50px; -webkit-transform:translateX(50px);}
        }
        div
        {
            width:100px;
            height:100px;
            background-color:red;
        }
        div:hover
        {
            -webkit-animation-name:mytransform;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
    </style>

上記のコードでは、キーフレームを使用して 2 つのアニメーションを定義していますが、アニメーション名を使用して mytransform を呼び出す限り、mytransform アニメーションには時間がかかります。 mytransform アニメーションでは、div で border-radius 属性値を 0 から 50px に変更し、次に 50% から 100% に変更し、属性を変更せずに水平方向に移動します。右は50ピクセル。

ホバー疑似クラスを使用すると、マウスが要素に移動するまでアニメーションが開始されないことに、多くの学生がこの質問を抱くでしょう。つまり、Web ページを開いたときです。初めてアニメーション効果を加えたいのですが、どうやって実装すればよいでしょうか?

実際、これも非常に簡単です。マウス ポインタが div 内にある場所でスタイルを見つけて削除し、そのスタイルを div 要素自体のスタイルに変更します。開いてもすぐには再生されません。

上記は、animation-name 属性を使用してアニメーションを呼び出す方法です。 CSS アニメーションの使い方の完全な紹介 CSS3 チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がアニメーション名属性を使用してアニメーションを呼び出すにはどうすればよいですか? CSSアニメーションの使い方ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。