CSS @keyframesルール

CSSでは、@keyframesルールを使用してアニメーションを作成できます。アニメーションは、CSSスタイルから別のCSSスタイルに徐々に変更することで作成されます。アニメーションの過程で、CSSスタイルの設定を複数回変更できます。指定された変更が発生したときに％を使用するか、または「from」と「to」のキーワードを使用します。これは0％から100％は同様に、0％はアニメーションの開始です。100％はアニメーションが完了したときです。最高のブラウザサポートを得るために、常に0％と定義するべきです。100％の選択子。

@keyframes ルールはCSS3で新しいルールが追加され、現在の主要ブラウザはすべてこのルールをサポートしています（ブラウザに対応するプレフィックスを含む）、IEには互換性がありません。 9および以前のバージョンのブラウザ。

@keyframes ルールの使用方法

このルールの構文は以下の通りです：

@keyframes　animationname　{keyframes-selector　{css-styles;}};

属性値の説明

animationname：animationの名前を定義；

keyframes-selector：アニメーションの持続時間のパーセンテージ、可能な値：0-100%、from (和0%相同)、to (和100%相同)。您可以用一个动画keyframes-selectors；

css-styles ：1つまたは複数の有効なCSSスタイル属性；

以下の例は実際の@keyframesのルールを示しています。

　　　　　　.box　{
　　　　　　　　　　width:　50px;
　　　　　　　　　　height:　50px;
　　　　　　　　　　background:　red;
　　　　　　　　　　position:　relative;
　　　　　　　　　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　　　　-webkit-animation-name:　moveit;
　　　　　　　　　　-webkit-animation-duration:　2s;
　　　　　　　　　　
　　　　　　　　　　animation-name:　moveit;
　　　　　　　　　　animation-duration:　2s;
　　　　　　}
　　　　　　　
　　　　　　/*　Chrome,　Safari,　Opera　*/
　　　　　　@-webkit-keyframes　moveit　{
　　　　　　　　　　from　{left:　0;}
　　　　　　　　　　to　{left:　50%;}
　　　　　　}
　　　　　　　
　　　　　　
　　　　　　@keyframes　moveit　{
　　　　　　　　　　from　{left:　0;}
　　　　　　　　　　to　{left:　50%;}
　　　　　　}

パラメータ

以下のテーブルは、このルールのパラメータを説明しています。

ブラウザの互換性

@keyframes 属性のブラウザの互換性、以下のテーブルの数字は、この属性をサポートするブラウザの最低バージョン番号を示します；すべての主要ブラウザはこのルールをサポートしています。

さらに詳しく

以下のチュートリアルを参照してください：CSS メディアタイプ。