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

Question

已找到解决方案（已将 "top: 0px" 添加到 .logo-box，因为它需要一个过渡位置）

我的网站左上角有一个徽标，我希望它在其 div "hover-box" 悬停时下拉，确实如此。但在某些时候，过渡不再需要 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: 0px;

到 .logo-box（非悬停）

它需要一些东西来过渡从 :)

Answer 2

我看到的问题是您正在应用到顶部的转换属性但它不在那个特定的 class 中。我认为你必须添加 top class.

.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;
}

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

Instant Transition - Duration Not Working?

html

css

transition