html - 即时过渡 - 持续时间不起作用？

Question

找到解决方案(将“top: 0px”添加到 .logo-box 因为它需要一个过渡的地方)

我的网站左上角有一个 Logo ，我希望它在其 div“悬停框”悬停时下拉，它确实如此。但在某些时候，过渡不再需要 0.2 秒，现在只是瞬间，为什么？

CSS:

#hover-box:hover > .logo-box {
top: 74px;
}
.logo-box {
width: 150px;
position: relative;
background-color: black;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
transition: top 0.2s ease-out;
}

Answer 1

我看到的问题是您正在将过渡应用到顶级属性，但它不在那个特定的类中。我认为您必须将 top 添加到该类。

.logo-box {
top: 0;
width: 150px;
position: relative;
background-color: black;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
transition: top 0.2s ease-out;
}