html - 如何使 CSS 转换工作 "backwards"？

Question

所以我在悬停时有这个过渡，它在悬停元素的底部形成了一个边框。那里一切都很好，但是当鼠标离开元素时，边框就会消失，而我希望它再次“缩回”。 Codepen

HTML:

<div class="object">

<p>Object</p>

</div>

CSS:

* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}

p {
 width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}

p:hover {
  border-bottom: 5px solid white;
}

我将如何着手做这件事，尽可能简单？谢谢;3

Answer 1

转换自动在两个方向上工作。

您遇到的问题是 border-style 不是可以设置动画的属性，因此它会立即更改。

这意味着当您悬停它时，它会立即变成solid，然后花时间变成5px。

但是当您取消悬停它时，它立即变为 none 并且您看不到宽度动画。

使默认(非悬停)状态明确，以便 border-width 是唯一在您悬停时发生变化的东西。

添加:

border-bottom: 0px solid white;

p 的规则。