html - 使用 CSS3 膨胀图像

Question

我有一个带有背景图片的 div，我想使用 CSS3 webkit-keyframes 对其进行膨胀。

我尝试使用 background-size 制作动画，但看起来 CSS3(或至少 Safari webkit)没有为 background-size 制作动画。

如何重写此代码以获得相同的效果(即我希望图像从 div 的中心膨胀)？

一些简单的 vanilla 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。 缩放 并为图像设置动画以按比例放大:

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

编辑:

已更新，因此图像不会“跳”回原始大小