如何更改过渡“ outro”？ （CSS转换）

时间：2020-05-15 07:56:06

标签： html css css-transitions css-transforms

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

1 个答案:

答案 0 :(得分：0)

在transition: all 0.3s;类而不是.probtn上定义: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>

相关问题
最新问题