div 要素が徐々に 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 ❯
他の "Try it Yourself" 例が下にあります。
@keyframes ルールは、アニメーションのコードを指定します。
アニメーションは、或る CSS スタイルのセットから、徐々に他のものに変化させることで作成します。
アニメーション中に、CSS スタイルのセットを何度も変更することができます。
スタイルの変化がいつ発生するかは、パーセントまたはキーワードの "from"、"to"で指定します。 0% はアニメーションが開始するときで、100% はアニメーションが完了したときです。
チップ: ベストなブラウザサポートのためには、常に、0% と 100% のセレクタ両方を定義するべきです。
注: アニメーションの外観を制御するため、およびアニメーションをセレクタにバインドするためにも、 animation プロパティを使用してください。
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
-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- |
@keyframes animationname {keyframes-selector {css-styles;}}
| 値 | 説明 |
|---|---|
| animationname | 必須。アニメーション名を定義します |
| keyframes-selector | 必須。アニメーション再生時間のパーセンテージ。 有効な値： 0-100% 注: 1 つのアニメーションに多数の keyframes-selectors を設定することができます |
| css-styles | 必須。1 つ以上の有効な 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;}
}
Try it Yourself ❯
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;}
}
Try it Yourself ❯
多数の CSS スタイルをもつ多数の keyframe セレクタ：
/* 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;}
}
Try it Yourself ❯
CSS3 チュートリアル：CSS3 Animations