如何使图像放大（放大/缩小）动画

Question

我有一个具有多个图像的div容器，如下所示：

<div style="width:600px;height:600px;>
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
</div>

并且div内的图像均具有相同的大小。

现在，当div滚动时，我想替换图像的src ，在替换期间，我要制作动画。（使图像放大/缩小）。

实际上，您应该猜测，当您在地图上滚动时，我想要的非常类似于Google地图的缩放动画。

有什么建议吗？

=====================================更新：

1）对于单个图像，我知道如何通过js或css3制作缩放动画。

但是， div内的图像的内容是连续的。 就像goole地图中的tile一样。

因此，我必须在动画制作过程中保持连续性，例如，当图像均按1.1缩放时，必须更改其位置以保持其内容连续性。

2）我必须支持ie7 +

Answer 1

该代码在IE以外的所有现代浏览器中均有效。 既然是css3解决方案。

http://www.dynamicdrive.com/style/csslibrary/item/css3_hover_image_gallery/

img {
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}

img:hover {
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
}