如何更改过渡 "outro"？ (CSS变换)

Question

所以我想创建一个按钮，向上移动并在下面创建一个小阴影，如果悬停并且到目前为止效果很好，但问题是，如果我停止悬停，动画就会重置，而它应该向后播放动画。在所有示例中，我都看到它只是在没有任何额外命令的情况下执行此操作。例如：我的按钮如果悬停在 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>

Answer 1

在 .probtn class 上定义 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;
}

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

如何更改过渡 "outro"？ (CSS变换)

How can I change the transition "outro"? (CSS transform)

html

css

css-transitions

css-transforms