HTML5+CSS3实现图⽚的放⼤缩⼩
最近做项⽬时，经常遇到需要图⽚缓慢放⼤的效果。我做的时候想到了⼏种⽅法，所以来总结⼀下。
1、利⽤css改变图⽚的宽⾼，做出视觉上的放⼤。
⾸先，将图⽚写⼊html页⾯中，给定宽⾼。
箭头所指向的就是我们需要变化的图⽚。我们需要给定图⽚⽗级盒⼦的宽⾼，如上图。
Tips:
transition⽤于设置四个过渡属性。
这四个属性分别为：
jquery在项目里是干啥的
这个属性要设置在做动画的元素上。就是“谁”做动画，“谁”就需要设置过渡属性。
设置图⽚的宽⾼分别为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就可以搞定了。
第⼀个值表⽰动画的名称，也就是我们所定义的动画名称。第⼆个值是完成动画的时间。
给定完毕后，便能够出现图⽚放⼤的动画效果了。