まず、定義と用法
@keyframes規則によって、アニメーションを作成する機能。
「から」キーワードのいずれかによって発生時における所定の割合の変化、および「に」、0％と100％に相当します。
0％は、アニメーションの開始時間の終了時、100％のアニメーションです。
第二に、文法
@keyframes animationname {
{からCSS-スタイル ;}
{にCSS-スタイル ;}
}
@keyframes animationname {
0％{ CSS-スタイル ;}
100％{ CSS-スタイル ;}
}
三、アニメーションプロパティ
| プロパティ |
説明 | プロパティ値 |
| アニメーション名 | アニメーションの名前。 | |
| アニメーションの継続時間 | アニメーション時間との完全な | |
| アニメーションの遅延 | ディレイタイム。 | |
| アニメーションの繰り返しカウント | アニメーションが再生されます。 | |
| アニメーションのタイミング機能 | アニメーションの速度曲線。 | 簡単：徐々に遅くなり、デフォルト のリニア：制服 やすイン：加速 やすアウト：減速 簡単・イン・アウト：加減速 |
| アニメーションの方向 | ターンリバースプレイ動画であるかどうか | 通常：デフォルト値、通常のアニメーション再生。 リバース：アニメーション再生を逆転。 代替：前方アニメーション奇数、さらに数回逆転劇中で数回プレイします。 代替リバース：奇数、さらに数回前進プレイ逆数倍で再生するアニメーション。 初期：デフォルト値に属性を設定します。 finherit：このプロパティは、親要素から継承されます。 |
| アニメーションプレイ状態 | アニメーションが実行中または一時停止されています | 一時停止：一時停止アニメーション ランニング：アニメーションの実行を |
| アニメーションフィルモード | アニメーションはに適用するスタイルを再生されない場合には | ノード：予想通り、デフォルト値、および映画の終わりであった、アニメーションの最後のフレームの完了時に、アニメーションがで初期フレームに反転されます 転送：アニメーションは最後のキーフレームの終了位置の後に引き続き適用され 後方：アニメーション要素の最初のフレームの迅速なアプリケーションアニメーションのスタイルを適用します 両方：アニメーション要素は、前後の効果の両方を持っています |
第四に、例
<DOCTYPE htmlの！>
<HTML>
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>キーフレーム</ TITLE>
<スタイル>
* {マージン：0;パディング：0;}
div要素{
幅：400ピクセル、高さ：400ピクセル;
国境：1pxの固体＃333;
マージン：0自動;
位置：相対;
}
、P {
幅は50px;高さ：は50px。
背景：紫;
境界半径：50％。
位置：絶対;
左：0;トップ：175px;
アニメーション：
}
{pmove @keyframes
;上部0PX：0％{左175px;背景：紫;}
25％{左：175px;上部：350px;背景：palevioletred;}
50％{左：350px;上部：175px;背景：梅;}
75％{左：175px;上部：0PX;背景：sandybrown;}
100％{左：0PX;上部：175px;背景：サケ;}
}
TR {高さ：30px;行の高さ：30px;}
< /スタイル>
</ HEAD>
<BODY>
の<div>
<P> </ P>
</ div>
</ BODY>
</ HTML>
