0
目前,我想要做一個動畫擴張球(圓),這是唯一的,只有使用CSS3應用邊界半徑一個div。CSS3動畫的邊界半徑不工作
我設法讓在WebKit瀏覽器維護動畫元素的球/圓形狀的動畫作品,但我不知道爲什麼它不會在Firefox上運行。它確實有一些應用邊界半徑(約20像素),但喜歡它是如何做的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;}
}
Coool man!謝謝!有效。現在我正在轉向歌劇。我沒有運氣。 – janharold 2013-03-21 04:58:37
對於Opera,使用*前綴的*關鍵幀動畫。並在**前綴後加**。 Firefox還支持關鍵幀動畫umprefixed。請參閱http://caniuse.com/#feat=css-animation – Ana 2013-03-21 07:38:45