如何用hover写出顺畅的动态效果

最近在做项目的时候遇到了一个问题，就是在用hover的时候 当鼠标移出之后 就没有了过渡效果 。

动态效果看起来很生硬，不顺畅。  

如何解决呢？   直接上代码：

html:

<div class="cardin"> </div>

css:

.cardin{ height:100px;width:50px; background:#161A1D; opacity:.7; -webkit-transition:all .4s cubic-bezier(0.4, 0, 0.2, 1); } 

.cardin:hover{height:10px; background:#eee; opacity:.2;transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all .4s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);}

只要在hover作用的对象上加上-webkit-transition就 ok了，是不是很简单！

转载于:https://juejin.im/post/5b597cdee51d4519873f675a