简单CSS反向过渡

Question

CSS初学者

img {
    top: 0;
    transition: all 0.5s ease-out;
}
img:hover {
    position: relative;
    top: -5px;
}

悬停时，此过渡效果很好。但是当您再次将鼠标移开时没有任何效果，'reverse' 转换是即时的。如何在反向转换时也达到0.5s？

Answer 1

img {
    position: relative;
    top: 0;
    transition: all 0.5s ease-out;
}
img:hover {
    top: -5px;
}

Answer 2

只需将 position: relative 从 :hover 规则移动到 img 规则。未悬停时，img 元素未相对定位。 top 属性不会对静态定位的元素执行任何操作。

img {
    position: relative;
    top: 0;
    transition: all 0.5s ease-out;
}
img:hover {
    top: -5px;
}

Answer 3

此问题已得到纠正。请看一下。

img {
  width: 136px;
  height: 23px;
  -webkit-transition: width 2s;
  /* For Safari 3.1 to 6.0 */
  transition: width 2s;
}
img:hover {
  width: 300px;
}

<div style="background-color:red;">
  <img src="http://jsfiddle.net/img/logo.png">
</div>

View on JSFiddle

简单CSS反向过渡

Simple CSS reverse transition

css

reverse

transition