CSS3アニメーションのプロパティ

CSS3 には新しいアニメーション属性「@keyframes」 があり、その意味は文字通りの意味であるキーフレームから理解でき、Flash の意味と一致しています。 CSS3 を使用してアニメーション効果を作成する原理は Flash と同じです。キーフレームで状態効果を定義し、CSS3 を使用してアニメーション効果を駆動する必要があります。

構文

@keyframes アニメーション名 {keyframes-selector {css-styles;}}
アニメーション名は必須です。アニメーションの名前を定義します。
キーフレームセレクター
必須。アニメーションの継続時間の割合。
有効な値:
0-100%
から (0% と同じ)
から (100% と同じ)
CSS スタイルが必要です。 1 つ以上の有効な CSS スタイルプロパティ。

定義と使用法
@keyframes ルールを使用すると、アニメーションを作成できます。
アニメーション作成の原則は、ある CSS スタイルのセットを別のスタイルのセットに徐々に変更することです。
この CSS スタイルのセットは、アニメーション処理中に複数回変更できます。
変更が発生する時間をパーセンテージで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用して指定します。
0% はアニメーションの開始時間、100% はアニメーションの終了時間です。
ブラウザのサポートを最適化するには、常に 0% および 100% セレクターを定義する必要があります。
注: アニメーションの外観を制御し、アニメーションをセレクターにバインドするには、アニメーションプロパティを使用してください。

ブラウザのサポート状況

現在、ブラウザは @keyframes ルールをサポートしていません。
Firefox は代替の @-moz-keyframes ルールをサポートしています。
Opera は代替の @-o-keyframes ルールをサポートしています。
Safari と Chrome は、代替の @-webkit-keyframes ルールをサポートしています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: #ff72cc;
            position: relative;
            animation: mymove 5s infinite;
            -moz-animation: mymove 5s infinite; /* Firefox */
            -webkit-animation: mymove 5s infinite; /* Safari and Chrome */
            -o-animation: mymove 5s infinite; /* Opera */
        }
        @keyframes mymove {
            0% {
                top: 0px;
            }
            25% {
                top: 200px;
            }
            75% {
                top: 50px
            }
            100% {
                top: 100px;
            }
        }
        @-moz-keyframes mymove /* Firefox */
        {
            0% {
                top: 0px;
            }
            25% {
                top: 200px;
            }
            75% {
                top: 50px
            }
            100% {
                top: 100px;
            }
        }
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
            0% {
                top: 0px;
            }
            25% {
                top: 200px;
            }
            75% {
                top: 50px
            }
            100% {
                top: 100px;
            }
        }
        @-o-keyframes mymove /* Opera */
        {
            0% {
                top: 0px;
            }
            25% {
                top: 200px;
            }
            75% {
                top: 50px
            }
            100% {
                top: 100px;
            }
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

CSS3 アニメーション

@keyframes でアニメーションを作成するときは、それをセレクターにバインドします。そうしないと、アニメーションは効果がありません。

少なくとも次の 2 つの CSS3 アニメーションプロパティがセレクターにバインドされるように指定します:

アニメーションの名前を指定します

アニメーションの継続時間を指定します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <style type="text/css">
            div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: mymove 5s infinite;
            -moz-animation: mymove 5s infinite; /* Firefox */
            -webkit-animation: mymove 5s infinite; /* Safari and Chrome */
            -o-animation: mymove 5s infinite; /* Opera */
        }
        @keyframes mymove {
            0% {
                top: 0px;
                background: red;
                width: 100px;
            }
            100% {
                top: 200px;
                background: yellow;
                width: 300px;
            }
        }
        @-moz-keyframes mymove /* Firefox */
        {
            0% {
                top: 0px;
                background: red;
                width: 100px;
            }
            100% {
                top: 200px;
                background: yellow;
                width: 300px;
            }
        }
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
            0% {
                top: 0px;
                background: red;
                width: 100px;
            }
            100% {
                top: 200px;
                background: yellow;
                width: 300px;
            }
        }
        @-o-keyframes mymove /* Opera */
        {
            0% {
                top: 0px;
                background: red;
                width: 100px;
            }
            100% {
                top: 200px;
                background: yellow;
                width: 300px;
            }
        }
    </style>
</head>
<body>
  <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
  <div></div>
</body>
</html>

CSS3 アニメーションプロパティ

以下の表に、@Keyframes ルールとすべてのアニメーション属性を示します。

属性説明 CSS

@Keyframes で指定されたアニメーション。 3

animation anime-play-state プロパティを除く、すべてのアニメーションプロパティの短縮形プロパティ。 3

アニメーション名 @keyframesアニメーションの名前を指定します。 3

animation-duration アニメーションが 1 サイクル完了するまでにかかる秒数またはミリ秒数を指定します。デフォルトは 0 です。 3

animation-timing-function アニメーションのスピードカーブを指定します。デフォルトは「簡単」です。 3

animation-delay アニメーションの開始時期を指定します。デフォルトは 0 です。 3

animation-iteration-count アニメーションの再生回数を指定します。デフォルトは 1 です。 3

animation-direction 次のサイクルでアニメーションを逆再生するかどうかを指定します。デフォルトは「通常」です。 3

animation-play-state アニメーションが実行中か一時停止中かを指定します。デフォルトは「実行中」です。 3

りー

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; -moz-animation: mymove 5s infinite; /* Firefox */ -webkit-animation: mymove 5s infinite; /* Safari and Chrome */ -o-animation: mymove 5s infinite; /* Opera */ } @keyframes mymove { 0% { top: 0px; background: red; width: 100px; } 100% { top: 200px; background: yellow; width: 300px; } } @-moz-keyframes mymove /* Firefox */ { 0% { top: 0px; background: red; width: 100px; } 100% { top: 200px; background: yellow; width: 300px; } } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% { top: 0px; background: red; width: 100px; } 100% { top: 200px; background: yellow; width: 300px; } } @-o-keyframes mymove /* Opera */ { 0% { top: 0px; background: red; width: 100px; } 100% { top: 200px; background: yellow; width: 300px; } } </style> </head> <body> <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> <div></div> </body> </html>

提出するリセットコード

自動運転