如何更改过渡“outro”？（CSS变换）[重复]答案

【问题标题】：How can I change the transition "outro"? (CSS transform) [duplicate]如何更改过渡“outro”？（CSS变换）[重复]
【发布时间】：2020-08-31 23:53:16
【问题描述】：

所以我想创建一个按钮，它向上移动并在下面创建一个小阴影，如果悬停并且到目前为止效果很好，但问题是，如果我停止悬停，动画只是重置，而它应该是种类向后播放动画。在所有示例中，我都看到它只是在没有任何额外命令的情况下做到这一点。例如：如果悬停，我的按钮会在 0.3 秒内向上移动 5 个像素，如果您停止悬停，它应该会在 0.3 秒内再次向下移动 5 个像素，但它只是立即执行。

我真的很感激任何关于这个问题的帮助，我只是无法理解。

这是我使用的代码：

<head>

.probtn {
  border-color: #282E34;
  color: #282E34;
}

.probtn:hover {
  background-color: #282E34;
  color: white;
  transition: all 0.3s;
  transform-origin: bottom;
  box-shadow: 0px 5px 5px 0px gray;
  transform: translate(0px,-5px);
  -webkit-transform: translate(0px,-5px);
  -moz-transform: translate(0px,-5px);
  -ms-transform: translate(0px,-5px);
  -o-transform: translate(0px,-5px);
}

.btn {
  border: 2px solid #282E34;
  background-color: white;
  color: #282E34;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5Px;
}

</head>

<Body>

<button class="btn probtn" type="button" onClick="kundenon()">Unsere Kunden</button>

</Body>

【问题讨论】：

标签： html css css-transitions css-transforms

【解决方案1】：

在 .probtn 类上定义 transition: all 0.3s; 而不是 :hover。否则，一旦悬停状态被移除，转换属性也会被移除。

.probtn {
  border-color: #282E34;
  color: #282E34;
  transition: all 0.3s; /* moved to base class instead of hover state */
  transform-origin: bottom;
}

.probtn:hover {
  background-color: #282E34;
  color: white;
  box-shadow: 0px 5px 5px 0px gray;
  transform: translate(0px,-5px);
  -webkit-transform: translate(0px,-5px);
  -moz-transform: translate(0px,-5px);
  -ms-transform: translate(0px,-5px);
  -o-transform: translate(0px,-5px);
}

.btn {
  border: 2px solid #282E34;
  background-color: white;
  color: #282E34;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5Px;
}

&lt;button class="btn probtn" type="button" onClick="kundenon()"&gt;Unsere Kunden&lt;/button&gt;

【讨论】：