css hover变成手_CSS3实现伪类hover离开时平滑过渡效果

由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。

大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。

离开时效果生硬

div{

width: 100px;

height: 100px;

border:1px solid;

margin:0px auto;

margin-top: 200px;

}

div:hover{

transform: scale(2);

transition: all 1s linear;

}

由于div元素只有在:hover伪类触发的时候，效果才能加到div元素上。

当鼠标离开div元素的时候，:hover伪类将不再生效，瞬间丢掉hover里写的动画效果。

此时，我们应当在原本元素上再写一个一模一样的transition效果，将离开断掉的动画效果续接上。

简单解决

div{

width: 100px;

height: 100px;

border:1px solid;

margin:0px auto;

margin-top: 200px;

/* 在原本元素上再加一个transition */

transition: all 1s linear;

}

div:hover{

transform: scale(2);

transition: all 1s linear;

}

此时，不管鼠标在什么时候离开元素，都会原样返回。

但此时会有一个问题，鼠标放上去，立马离开，或者鼠标从上边匀速划过，div回到原样的时间，依旧是1s。

其实，我们在hover里写的transition:all 1s linear完全是多余的。

transition有一个特性，只要是带有数值类型的属性(例如：% , rgba() , rgb() , hsla() , 数字等)，在其发生变化的时候，均会被触发动画效果。

因此，不管:hover伪类什么时候丢掉我的动画，也不管我:hover时，元素动画走到了什么地步。只要元素本身带有transitioin，该动画便会从当前动画执行到的地方，以相同的时间返回原样。

简单解决

div{

width: 100px;

height: 100px;

border:1px solid;

margin:0px auto;

margin-top: 200px;

/* 在此处留一个transition就够了 */

transition: all 1s linear;

}

div:hover{

transform: scale(2);

/* 去掉这个tansition */

/* transition: all 1s linear; */

}

这只是最简单的动画实现，但对于目前大部分需求来说，配合配合贝塞尔曲线，已经足够用了。

你仅仅需要做到，hover中的最终样式，保证为数值样式变OK了。

像display:block变为display:none就不好使了，此时我们可以用visibilty:1变为visibilty:0，同样也可以简单实现显示到隐藏的效果。

另外加一句，不太清楚transition属性的可以自行去百度去，transition-timing-function属性定义的速度曲线，使用cubic-bezier贝塞尔曲线，可以做到很多效果，大家可以上这个网址去试一试贝塞尔曲线实现的动画。