CSS 边框不会动画

Question

出于某种原因，当我将鼠标悬停在 div 上时，边框会正确设置动画，但鼠标离开它时不会产生任何过渡。我错过了什么？

HTML:

<div class="test">
  Test
</div>

少：

.test {
  background: #eee;
  border-bottom: none;
  width: 300px;
  height: 300px;
  transition: border 100ms ease-out;

  &:hover {
    border-bottom: 5px solid black;
    transition: border 100ms ease-out;
  }
}

Answer 1

您不能为 border-bottom: none 设置动画，将其更改为 border-bottom: RGBA(0,0,0,0) （或者 border-bottom: transparent 如果可行的话） .

您也不需要 "transition: border 100ms ease-out" 悬停范围。

Answer 2

如果您确实想要无边框，可以将颜色设置为透明并将长度设置为 0：

.test {
  background: #eee;
  border-bottom: 0px solid transparent;
  width: 300px;
  height: 300px;
  transition: border 100ms ease-out;
}

.test:hover {
  border-bottom: 5px solid black;
}

<div class="test">
  Test
</div>

Answer 3

边框不能是none。试试这个：

.test {
  background: #eee;
  border-bottom: 5px solid transparent;
  width: 300px;
  height: 300px;
  transition: border 100ms ease-out;

  &:hover {
    border-bottom: 5px solid black;
    transition: border 100ms ease-out;
  }
}

CSS 边框不会动画

CSS border won't animate

css

less

css-animations