CSS:hover 图片缩放

前段时间看到有些网站上有这种效果，鼠标悬停到图上它会自己收缩，于是尝试实现一下，CSS3的动画，定义了两个类，然后用JQ hover事件分别分别给标签添加对应的动画类名，不过效果不好，在迅速来回移动鼠标的时候，动画会衔接不上，突然变大的感觉，原因是在CSS动画中写死了变化的起始和终止时图片的缩放比例，只有完全放大或者缩小之后再进行后续的动画才会感觉流畅，但用户鼠标不可能在图上悬停超过0.5秒再离开。

<li class="flex-item"><a href=""><img src="./image/digital/03.jpg" alt=""><p>暖手宝<br/><em>￥99.00</em></p></a></li>

.productLargeAnimation{animation:ProtoLarge 0.5s ease 0s 1 normal; animation-fill-mode:both; -webkit-animation:ProtoLarge 0.5s ease 0s 1 normal; -webkit-animation-fill-mode:both; }
.productSmallAnimation{animation:ProtoSmall 0.5s ease 0s 1 normal; animation-fill-mode:both; -webkit-animation:ProtoSmall 0.5s ease 0s 1 normal; -webkit-animation-fill-mode:both; }
@keyframes ProtoLarge{0% {transform: scale(1);} 100% {transform: scale(1.03);} }
@-webkit-keyframes ProtoLarge {0% {-webkit-transform: scale(1);} 100% {-webkit-transform: scale(1.03);} }
@-moz-keyframes ProtoLarge {0% {-moz-transform: scale(1);} 100% {-moz-transform: scale(1.03);} }
@-o-keyframes ProtoLarge {0% {-o-transform: scale(1);} 100% {-o-transform: scale(1.03);} }
@keyframes ProtoSmall{0% {transform: scale(1.03);} 100% {transform: scale(1);} }
@-webkit-keyframes ProtoSmall {0% {-webkit-transform: scale(1.03);} 100% {-webkit-transform: scale(1);} }
@-moz-keyframes ProtoSmall {0% {-moz-transform: scale(1.03);} 100% {-moz-transform: scale(1);} }
@-o-keyframes ProtoSmall {0% {-o-transform: scale(1.03);} 100% {-o-transform: scale(1);} }
@keyframes ProtoSmall{0% {transform: scale(1.03);} 100% {transform: scale(1);} }
@-webkit-keyframes ProtoSmall {0% {-webkit-transform: scale(1.03);} 100% {-webkit-transform: scale(1);} }
@-moz-keyframes ProtoSmall {0% {-moz-transform: scale(1.03);} 100% {-moz-transform: scale(1);} }
@-o-keyframes ProtoSmall {0% {-o-transform: scale(1.03);} 100% {-o-transform: scale(1);} }

$("a").hover(function() {
	   	var thatImage = $(this).children('img');
	   	thatImage.removeClass('productSmallAnimation').addClass('productLargeAnimation');
	   }, function() {
	   	var thatImage = $(this).children('img');
	   	thatImage.addClass("productSmallAnimation").removeClass('productLargeAnimation');
	   });

今天无意翻看到同类的效果，瞬间明白怎么回事，根本就不需要那么麻烦。

<div class="c"><a href=""><img src="a.jpg" alt=""></a><p>缩放动画</p></div>

.c{
		width: 448px; 
		height: 400px;
	}
	.c a{
		display: block; 
		width: 100%; 
		height: 247px; 
		overflow: hidden;}
	.c img{
		-moz-transition: all 1s ease 0s; 
		-o-transition: all 1s ease 0s; 
		-webkit-transition: all 1s ease 0s; 
		transition: all 1s ease 0s;
	}
  	.c a:hover img{
  		transform: scale(1.15); 
  		-webkit-transform: scale(1.15);
  		-moz-transform: scale(1.15); 
  		-o-transform: scale(1.15);
  	}

所以思维不能受局限了，看到这样的效果就去匆忙写动画， 实际上只是过渡效果。