0
我有一個div背景圖片，我想使用CSS3 webkit-keyframes膨脹。使用CSS3膨脹圖像
我嘗試使用background-size進行動畫製作，但它看起來像CSS3（或至少Safari webkit）不會動畫background-size。
如何重寫此代碼以獲得相同的效果（即，我希望圖像從div中心膨脹）？
一些簡單的香草JavaScript也可以，但我更喜歡純粹的CSS解決方案。
HTML：
<div id="image"></div>
CSS：
div#image
{
background: url('../img/image.png');
background-repeat: no-repeat;
background-position: center;
width: 125px;
height: 252px;
position: absolute;
left: 170px;
top: 260px;
-webkit-animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.35, 1.0);
-webkit-transform: translateZ(0);
-webkit-animation-duration: 4s;
-webkit-animation-name: pop_image;
}
@-webkit-keyframes pop_image
{
0% {background-size: 0%;}
25% {background-size: 0%;}
48% {background-size: 100%;}
100% {background-size: 100%;}
}
編輯：
我也試過動畫上-webkit-transform: scale()，但也不能工作。
編輯2：
所以，動畫上-webkit-transform: scale()工作，我只需要刷新瀏覽器。
這裏是CSS3關鍵幀：
@-webkit-keyframes pop_keys
{
0% {-webkit-transform: scale(0,0);}
25% {-webkit-transform: scale(0,0);}
48% {-webkit-transform: scale(1,1);}
100% {-webkit-transform: scale(1,1);}
}