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

659 阅读1分钟

最近在做项目的时候遇到了一个问题,就是在用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了,是不是很简单!