css3 - Hover off transition css -
this question might obvious i'm new in css.
i'm animating shape when hover it, stretches. i've completed hover on nice ease transition when move off mouse transition doesn't work. there way make happen in hover off moment?
.shape1{ position: absolute; background:red top:512px; width:180px; height:140px; } .shape1:hover { height: 160px; top:492px; transition: 0.2s ease; }
your answer
you have added transition
property on hover state of element. therefore transition
not applied when leave cursor
element.
.shape1{ position: absolute; background: red; top: 512px; width: 180px; height: 140px; transition: .2s ease; /* move here :hover */ }
further information
besides can add specific properties transition
. example, if want height animated this:
.shape1 { transition: height .2s ease; /* inly affects height, nothing else */ }
you can define different transition-times each property:
.shape1 { transition: height .2s ease, background-color .5s linear; /* stacking transitions easy */ }
Comments
Post a Comment