如何使CSS过渡"倒退"？

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.

Answer 2

我不知道这是否有帮助，但就我而言，我只是这样做：

超过：

.<nameOfClass>:hover{
 transition: width 0.4s ease-in-out;
}

没有结束：

.<nameOfClass>:not(:hover){
 transition: width 0.4s ease-in-out;
}