表示ブロック; 幅：50％;
高さ：50％;
境界半径：50％。
背景：RGB（11、189、165）。
}
.boxs ::前{
背景：半径方向の勾配（25％#FFF、＃000 25％）。
変換起源：0％、50％;
アニメーション名：移動。
アニメーション-期間：1秒。
アニメーションのタイミング機能：リニア;
アニメーションの繰り返しカウント：無限。
アニメーション方向：代替。
}
.boxs :: {後
背景：ラジアル勾配（＃000、25％、25％#FFF）。
変換起源：100％、50％;
アニメーション名：移動。
アニメーション-期間：1秒。
アニメーションのタイミング機能：リニア;
アニメーションの遅延：-1,2;
アニメーションの繰り返しカウント：無限。
アニメーション方向：代替。
}
/ *キーフレーム（@keyframes）とアニメーションプロパティアニメーション：
アニメーション作成、1.3倍0.7倍の元のサイズからの変化：* /
@keyframes {移動
{から
変換：スケール（0.7）;
}
{に
変換：スケール（ 1.3）;
}
}
</スタイル>
</ HEAD>
<BODY>
<Iクラス= "boxs"> </ I>
</ BODY>
</ HTML>