CSS3图片放大动画

需求：产品要求图片hover有个放大动画效果

技术点： transform scale transition

img.hover {
   transform: scale(1.1, 1.1);
   transition: .3s transform;
}

transform:scale()：

含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

transition： W3C标准中对CSS3的transition这是样描述的:

CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

通过W3C描述，我们可以很容易得到下面的结论：

.3s 表示0.3秒, 执行transform动作。