@keyframes CSS プロパティとは
トピック：アニメーションシーケンスに沿ってキーフレームを確立することによって、アニメーションシーケンスのサイクル中に中間ステップを指定するために使用することができる @keyframesルールはキーワード "@keyframes"と、アニメーションの名前(アニメーション名プロパティを使用して参照される)、スタイルルール(中括弧で区切られたもの)の後に続く識別子で構成する キーフレームスタイルルールのキーフレームセレクタは、パーセンテージ(％)またはキーワード(0％と同じ)またはから(100％と同じ)で始まります。 セレクタは、アニメーションの長さに沿ってキーフレームが構築される場所を指定するために使用される
プロパティ @keyframes
実例 コード 1
要素を徐々に200ピクセル下に移動させる：サンプル コードを試す @keyframes webref {
from {top: 0px;}
to {top: 200px;}
}
構文
@keyframes animation-name {keyframes-selector {css-styles;}}
プロパティ値
| 値 | 説明 |
|---|
css-styles | 必須 - CSSが有効になるには、次のパラメータが必要です。 |
animation-name | アニメーションの名前。 |
keyframes-selector | アニメーションの長さに沿ったパーセンテージを指定する キーフレームルールのキーフレーム宣言ブロックは、プロパティと値で構成される。 |
使用上の注意：- キーフレームセレクタが負のパーセンテージ値又は 、100％より高い値を指定する場合、キーフレームは 無視 される 。
サポートするデスクトップ ブラウザ対応・互換性
| 機能 | Chrome | Firefox | Internet Explorer | Opera | Safari (WebKit) |
|---|
| 基本サポート | サポート(◯)-webkit | 5.0 (5.0)-moz | 10 | 12 -o | 4.0-webkit |
|---|
サポートするモバイル ブラウザ対応・互換性
| 機能 | Android | Firefox Mobile | IE Phone | Opera Mobile | Safari Mobile |
|---|
| 基本サポート | 不明 | 不明 | 不明 | 不明 | 不明 |
|---|
CSS @keyframes | CSS プロパティ 値| 意味 使い方 実例 – WebRef