CSS边框不会有动画效果

时间:2015-07-20 21:56:28

标签: css css3 less css-animations

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

http://codepen.io/anon/pen/XbPbvr

HTML:

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

LESS:

.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;
  }
}

3 个答案:

答案 0 :(得分:5)

如果您真的不想要边框,可以将颜色设置为透明,长度为0:

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

.test:hover {
  border-bottom: 5px solid black;
}
&#13;
<div class="test">
  Test
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:3)

你无法动画到border-bottom:none,将其更改为border-bottom:RGBA(0,0,0,0)(或者可能是border-bottom:透明,如果可行)。

你也不需要&#34;过渡:边界100毫秒的缓解&#34;在悬停范围内。

答案 2 :(得分:1)

边境不能是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;
  }
}