使用 CSS3 为图像充气答案

【问题标题】：Inflate an Image Using CSS3使用 CSS3 为图像充气
【发布时间】：2013-03-04 15:06:51
【问题描述】：

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

【问题讨论】：

标签： html css css-animations

【解决方案1】：

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

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

编辑：

更新后图像不会“跳”回原始大小

【讨论】：