CSS Transition反向过渡失效求助：移出光标后样式突变

你的反向过渡失效是因为border-style属性未添加过渡：当hover时设置border-width:0，浏览器会自动将border-style设为none；光标移出时，border-style从none瞬间变回初始的solid，这个突变让视觉上看起来整个过渡都没执行。

修复方案 #

将按钮的transition属性里的border-width替换为border，让border的所有属性（宽度、样式、颜色）都参与过渡：

.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;
  /* 替换border-width为border，覆盖所有border属性的过渡 */
  transition: color 0.35s ease, border 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;
}

修改后，光标移出时按钮的边框会平滑过渡回初始状态，内部的circle-layer也会正常反向缩放，整个交互效果保持一致。

内容的提问来源于stack exchange，提问作者Samarth Mishra