使用CSS3膨胀图像

Question

我有一个div背景图片，我想使用CSS3 webkit-keyframes膨胀。

我尝试使用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);} 
} 

Answer 1

您可以使用CSS。 scale和动画图像，以扩大：

http://jsfiddle.net/DvVug/1/

编辑：

更新使图像不 '跳' 回原来的大小