CSS @ keyframesルール
例
要素を徐々に200px下に移動させます。
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
@keyframes
ルールはアニメーションコードを指定します。
アニメーションは、CSSスタイルのセットから別のセットに徐々に変更することによって作成されます。
アニメーション中に、CSSスタイルのセットを何度も変更できます。
スタイルの変更がいつ発生するかをパーセントで指定するか、キーワード「from」と「to」を使用して指定します。これは、0%と100%と同じです。0%はアニメーションの開始、100%はアニメーションの完了時です。
ヒント:最高のブラウザーサポートを得るには、常に0%セレクターと100%セレクターの両方を定義する必要があります。
注:アニメーションのプロパティを使用して、アニメーションの外観を制御したり、アニメーションをセレクターにバインドしたりします。
注:!importantルールはキーフレームでは無視されます(このページの最後の例を参照してください)。
ブラウザのサポート
表の数字は、ルールを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-、-moz-、または-o-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
@keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
CSS構文
@keyframes animationname {keyframes-selector {css-styles;}}
プロパティ値
Value | Description |
---|---|
animationname | Required. Defines the name of the animation. |
keyframes-selector | Required. Percentage of the animation duration. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation. |
css-styles | Required. One or more legal CSS style properties |
その他の例
例
1つのアニメーションに多くのキーフレームセレクターを追加します。
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
例
1つのアニメーションで多くのCSSスタイルを変更します。
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
例
多くのCSSスタイルを持つ多くのキーフレームセレクター:
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
例
注:!importantルールはキーフレームでは無視されます。
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
関連ページ
CSSチュートリアル:CSSアニメーション