由于hover伪类添加的动画效果仅当鼠标放在元素上时会被触发，而当鼠标离开时效果会中断，会显得很生硬
大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦CSS3便可以帮你解决这些问题。

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

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

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

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

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

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

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

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

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

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