アニメーション名属性を使用してアニメーションを呼び出すにはどうすればよいですか?アニメーション名属性の詳細説明-CSSチュートリアル-php.cn

アニメーション名属性を使用してアニメーションを呼び出すにはどうすればよいですか?アニメーション名属性の詳細説明

云罗郡主

リリース： 2018-11-20 16:58:17

転載

3642 人が閲覧しました

この記事の内容は、animation-name 属性を使用してアニメーションを呼び出す方法についてです。 anime-name 属性の詳細な説明は、参考にしていただければ幸いです。

animation-name 属性:

CSS3 では、@keyframes ルールを使用して定義されたアニメーションは自動的に実行されません。アニメーションを呼び出すには、animation-name 属性も使用する必要があります。アニメーションが有効になります。

構文:

animation-name: アニメーション名;

説明:

animation-name によって呼び出されるアニメーション名は次のように定義する必要があることに注意してください。 @keyframes ルールアニメーション名は完全に一致しています (大文字と小文字が区別されます)。一致しない場合、アニメーション効果はありません。ブラウザの互換性を確保するには、Chrome および Safari ブラウザの場合は -webkit- プレフィックスを追加する必要があり、Firefox ブラウザの場合は -moz- を追加する必要があります。

コード:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 animation-name属性</title>
    <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>
</head>
<body>
    <div></div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです:
アニメーション名属性を使用してアニメーションを呼び出すにはどうすればよいですか?アニメーション名属性の詳細説明

分析:

ここでは @keyframes を使用します。 mycolor と mytransform の 2 つのアニメーションを定義するルール。ただし、アニメーション名を使用して mytransform という名前のアニメーションを呼び出すだけです。したがって、mytransform という名前のアニメーションは有効になりますが、mycolor という名前のアニメーションは有効になりません。

mytransform アニメーションでは、div 要素の border-radius 属性値が 0% から 50% の間で 0 から 50px に変化し、その後 50% から 100% の間で border-radius 属性値は変化しません。そしてそれを右に水平方向に 50 ピクセル移動します。

方法(1):

@-webkit-keyframes mytransform
{
0%{border-radius:0;}
50%{border-radius:50px;-webkit-transform:translateX（0）；}
100%{-webkit-transform:translateX（50px）；}
}

ログイン後にコピー

方法(2):

@-webkit-keyframes mytransform
{
0%{border-radius:0;}
50%{border-radius:50px;}
100%{-webkit-transform:translateX（50px）；}
}

ログイン後にコピー

初心者は毎回よく疑問を感じます。定義: hover 擬似クラス定義。初めて Web ページを開いたときにアニメーションが自動的に実行されるようにするには、どうすればよいでしょうか。

これは実際には非常に簡単です。マウスポインターが div 要素上にあるときにスタイルを削除し、スタイル内のコードを div 要素自体のスタイルに書き換えます。次のようなコードになります。ページ上でアニメーションが開きます。すぐに再生します。

div
{
    width:100px;
    height:100px;
    background-color:red;
    -webkit-animation-name:mytransform;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
}

ログイン後にコピー

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

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