CSS解决hover选择器生硬效果

在这里就简单的放了一张图片。来说明hover生硬的问题。现在来看，第一个代码可以实现放大缩小了。但是问题随之来了。体验太差了。这不是我想要的。。。。改进

<style>
　　img {
　　　　 100px;
　　　　height: 100px;
　　　　/*border-radius: 50%;
　　　　margin-left: 45%;
　　　　margin-top: 10%;*/
　　}

　　img:hover {
　　　　/*放大图片1.3表示放大的倍数*/
　　　　transform: scale(1.3, 1.3);
　　}

</style>
<img src="img/bizhi.jpg" />

改进后效果好了一点，当鼠标获取到图片的焦点时，有了动画效果。但是问题又来了。。。。。失去焦点时太难看了。。。。改进

<style>
　　img {
　　　　 100px;
　　　　height: 100px;
　　　　/*border-radius: 50%;
　　　　margin-left: 45%;
　　　　margin-top: 10%;*/
　　}
　　img:hover {
　　　　/*放大图片1.3表示放大的倍数*/
　　　　transform: scale(1.3, 1.3);
　　　　/*在hover里面加上效果完成的时间*/
　　　　transition: all 0.5s linear;
　　}
</style>
<img src="img/bizhi.jpg" />

最后问题解决了。我们应该在变化的元素上加上和hover里面一样的效果。才能在失去焦点时继续完成动画。。。。

<style>
　　img {
　　　　 100px;
　　　　height: 100px;
　　　　/*border-radius: 50%;
　　　　margin-left: 45%;
　　　　margin-top: 10%;*/
　　　　transition: all 0.5s linear;
　　}
　　img:hover {
　　　　/*放大图片1.3表示放大的倍数*/
　　　　transform: scale(1.3, 1.3);
　　　　/*在hover里面加上效果完成的时间*/
　　　　transition: all 0.5s linear;
　　}

</style>
　　<img src="img/bizhi.jpg" />