Recently, I encountered a problem when I was working on a project, that is, when I used hover, there was no transition effect after the mouse moved out.
Dynamic effects look stiff and not smooth.
How to solve it? Directly on the code:
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 object () : webkit-transition (); hover object () : webkit-transition ();