即使在正确的过渡规则之后，CSS Transition 对我来说也无法反向工作-解网

问：

CSS 过渡工作正常，但是当我将光标移开时，它确实会过渡回来，而是突然回到原始样式。

这是我的代码：

.form-component button {
  align-self: end;
  margin-left: 35px;
  position: relative;
  background-color: black;
  height: 120px;
  width: 140px;
  border: 1px solid #db6345;
  border-radius: 50%;
  color: #b5ab9a;
  font-size: 20px;
  letter-spacing: 2px;
  overflow: hidden;
  transition: color 0.35s ease, border-width 0.9s ease;
}

.form-component .circle-layer {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 0;
  width: 0;
  background: #db6345;
  border-radius: 50%;
  transition: height 0.9s ease, width 0.9s ease;
  z-index: -1;
}

.form-component button:hover .circle-layer {
  height: 100%;
  width: 100%;
}

.form-component button:hover {
  color: black;
  border-width: 0px;
  z-index: 1;
}

<div name="project-details-validator" class="form-component">
  <textarea placeholder="Project details and clarifications " rows="8"></textarea>

  <button hover="true" id="send-button">
        <div class="circle-layer" id="send-button-circle-layer" hover="true"></div>
        SEND
    </button>
</div>

我尝试为所有属性添加过渡便利性，但即使这样也不起作用。

HTML CSS CSS 过渡

即使在正确的过渡规则之后，CSS Transition 对我来说也无法反向工作

CSS Transition is not working in reverse direction for me even after correct transition rules

评论