例
要素が徐々に200pxの下に移動してください：
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
»それを自分で試してみてください もっと"Try it Yourself"以下の例。
定義と使用法
@keyframesルールは、アニメーションのコードを指定します。
アニメーションは徐々に別のCSSスタイルの1セットから変更することによって作成されます。
アニメーション中は、CSSスタイルのセットを何度も変更することができます。
スタイルの変化はパーセントで、またはキーワードでどうなるタイミングを指定し"from"と"to" 0％と100％同じです。 0％は、アニメーションが完了したときに100％であり、アニメーションの開始です。
ヒント：最高のブラウザのサポートのために、あなたは常に0％と100％のセレクタの両方を定義する必要があります。
Note:アニメーションの外観を制御するために、アニメーションのプロパティを使用し、また、セレクタにアニメーションをバインドします。
ブラウザのサポート
表中の数字は完全にルールをサポートする最初のブラウザのバージョンを指定します。
-webkit-が続く数字、-moz-または接頭辞で働いていた最初のバージョンを指定して-O-です。
| プロパティ | |||||
|---|---|---|---|---|---|
| @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の構文
@keyframesanimationname {keyframes-selector {css-styles;}}プロパティ値
| 値 | 説明 |
|---|---|
| animationname | 必須。 アニメーションの名前を定義します。 |
| keyframes-selector | 必須。 アニメーションの再生時間の割合。 有効な値： 0から100パーセント Note:あなたは1アニメーションで多くのキーフレーム・セレクタを持つことができます。 |
| css-styles | 必須。 一つ以上の法的なCSSスタイルプロパティ |
その他の例
例
1アニメーションで多くのキーフレームセレクタを追加します。
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
»それを自分で試してみてください 例
1アニメーションで多くのCSSスタイルを変更します。
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
»それを自分で試してみてください 例
多くのCSSスタイルを持つ多くのキーフレームセレクタ：
/* Chrome, Safari, Opera */
@-webkit-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;}
}
/* Standard syntax */
@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;}
}
»それを自分で試してみてください 関連ページ
CSS3のチュートリアル： CSS3アニメーション