私は現在、css3のみを使用してborder-radiusが適用されたdivのみである、アニメーション化された拡張球(円)を作成しようとしています。
アニメーション要素の球/円の形状を維持する webkit ブラウザーでアニメーションを動作させることができましたが、Firefox で動作しない理由がわかりません。いくつかの境界線半径 (約 20px) が適用されていますが、webkit のようには機能しません。
これが私が使用するコードです。
@-webkit-keyframes expandSphere
{
0%{padding:10px; opacity: 0;}
25%{height: 150px; border-radius: 150px; width:150px; left:520px; top:200px;}
55%{height: 350px; border-radius: 500px; width:350px; left:420px; top:100px;}
75%{height: 547px; border-radius: 700px; width:700px; top:0; left:250px;}
100%{height:547px; opacity: 1; top:0px; left:0; width:1180px; border-radius: 0;}
}
@-moz-keyframes expandSphere
{
0%{padding:10px; height:20px; width:20px; opacity: 0; -moz-border-radius: 50px;}
25%{height: 150px; width:150px; left:520px; top:200px; -moz-border-radius: 150px;}
55%{height: 350px; width:350px; left:420px; top:100px; -moz-border-radius: 500px;}
75%{height: 547px; width:700px; top:0; left:250px; -moz-border-radius: 700px;}
100%{height:547px; opacity: 1; top:0px; left:0; width:1180px; -moz-border-radius: 0;}
}