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

Question

所以我在悬停时有这个过渡，它在悬停元素的底部形成了一个边框。那里一切都很好，但是当鼠标离开元素时，边框就会消失，而我希望它 "retract" 再次返回。 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

将 border-bottom: 0px solid white 添加到 p。 Css 想知道转换回哪里！ :D

Answer 3

对于过渡添加动画 class 到您想要过渡的元素

.animate 
 { 
  transition: all .5s;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
 }

现在，当您将此 class 添加到您的元素时，它将在悬停和悬停时进行转换。

Answer 4

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

超过：

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

没有结束：

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

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

How to make a CSS transition work "backwards"?

html

css

css-transitions