最近做项目时，常常碰着须要图片缓慢放大的效果。我做的时候想到了几种方法，以是来总结一下。
1、利用css改变图片的宽高，做出视觉上的放大。
首先，将图片写入html页面中，给定宽高。
箭头所指向的便是我们须要变革的图片。我们须要给定图片父级盒子的宽高，如上图。
Tips:
transition用于设置四个过渡属性。
这四个属性分别为：
这个属性要设置在做动画的元素上。便是“谁”做动画，“谁”就须要设置过渡属性。
设置图片的宽高分别为100%，是为了让图片与父级盒子一样大。这样当盒子变大时，图片不会涌现偏移的征象。
以上准备事情完成后，我们就须要设置鼠标移动后图片父级盒子改变到的宽高。
这样就可以实现鼠标划过图片变大的效果了。
当然，同样也可以直接浸染于图片上，方法还是一样的。
2、利用jQuery中的css()方法，改变图片的大小。
同样将图片盒子给定宽高。
样式与方法一相同。
然后我们利用css()方法来改变他的大小。
这样就可以利用css()方法来改变他的宽高，从而做到图片的放大效果。
3、利用jQuery中的animate()自定义动画的方法，改变图片的大小，实现放大的效果。
要利用这种办法，html与css跟之前是一样的。
由于animate方法是自定义动画方法，因此不须要过渡属性来进行缓动。
此时，页面上的图片便会自动放大。
4、利用scale()方法，实现图片放大的效果。
scale() 方法为画布确当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。图片的变革因此中央为基准点来变革的。
这个方法同样是通过样式进行改变的。
构造和样式不须要进行调度。
只须要给图片盒子加一个transform: scale(1.2);即可 。数值表示放大/缩小的为原始的几倍。（此时的过渡效果最好还是添加上，可以使图片变革时觉得更加调皮流畅）
5、利用css3的keyframe来创建动画
Keyframe的定义和用法如下：
首先html构造还是一样，css则须要进行改变。我们须要设定的是动画后的值。
比如：
接下来我们要设定动画中css样式。我将动画分成了5个阶段。每个阶段改变他宽高的1/5，连贯下来就会涌现动画的效果。
之以是写多个，是由于浏览器并不完备之前keyframe，因此须要利用每个浏览器所支持的不同的写法。
这是w3c上标明的对付浏览器的支持程度。
创建完动画之后我们就可以直接引用了。只要利用animation就可以搞定了。
第一个值表示动画的名称，也便是我们所定义的动画名称。第二个值是完成动画的韶光。
给定完毕后，便能够涌现图片放大的动画效果了。
原文地址：http://www.gonet.com.cn/webduirshow-124.html
