css - 简单的 CSS 反向过渡

Question

这里是 CSS 初学者

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

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

Answer 1

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

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