如何使用CSS3 transition过渡动画调整？

想给学而行营销网图文列表中的图片，增加一点动态交互——别一动不动地躺尸，太平了!

看过别家的网站，其中鼠标移到图片上，图片会适当地进行缩放，这种微妙的动态体验，给人的感觉是蛮好的。

哥知道这是css3可以实现的功能。试为之。

既然是鼠标移上去后再发生变化，那首先需在css文件中，针对图片的hover增加个样式，缩放比例为1.1。如下：

.index-list-tu li a img:hover {-webkit-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1);}

怀着憧憬，查看变化。

结果：动态是有了，只是动作太迅猛，不平滑，感觉很突兀。就像以前用flash制作动画一样，缺少中间过渡(这个知识点，源于已经过世的flash)。

(没玩过动态的gif录屏，用ps制作了一个动画来模拟。)

看来没那么简单，还需要对图片对应的样式写上css3的transition(过渡)。如下红色为增加的transition部分：

.index-list-tu li a img {width: 230px;height: 145px;border-radius:3px;float: left;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;}

如此追加了，这个针对图片的平滑的微动效就有了(可参见学而行营销网首页中的图文列表)。

关于CSS3 transform的更多知识方法，可以参考w3cschool提供的这个：CSS3 transform 属性 CSS3 过渡

另有发现一个小问题：就是缩放1.1倍后，其所占据的空间也增大了。这样也可以接受，但个人感觉最好是保持在原有的框框内，以保持整体的齐整性及美观。

那就去找包围图片的那个div(