1

我有一个带有背景图像的 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);}
}
4

1 回答 1

1

你可以使用css。scale并为图像设置动画以放大：

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

编辑：

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

于 2013-03-04T15:13:31.030 回答