Html CSS转换：边框幻灯片而不是淡入淡出

我设置了一个链接的样式，这样当你将其悬停时，顶部会出现一个边框；当你悬停在边界外时，边界将随着过渡而消失。当您将鼠标悬停在边框上并将其关闭时，边框将滑入而不是淡入。我希望边框淡入，而不是滑动。我该怎么做？这是一个

HTML

---

如果要设置颜色的动画，请设置颜色的动画，而不是整个边框的动画。您现在还可以将其从0像素设置为3像素，因此它当然会滑入。你应该给它一个默认的透明边框

div {
    line-height: 50px;
    width: 100px;
    text-align: center;
    cursor: pointer;
    transition: border-color .5s ease-in-out;
    border-top: 3px solid transparent;
}

div:hover {
    border-top-color: #000;
}

作为旁注：

-moz transition

现在已经过时了，因为FF17左右的Mozilla支持没有前缀的CSS Transitions模块

---

2014年12月更新：我注意到这个答案仍在被频繁查看和投票，请注意，

转换

不再是前缀。

在这种情况下，您也需要有一个边框作为开始。在第一个状态中使其透明。这样它就不会“成长”到合适的位置。。。颜色会随着变化而褪色

---

至于是否仍然需要-moz转换，我会亲自检查并做出决定。我想可能有人在使用Firefox16？我已经添加了一个关于前缀的说明，以反映当前的浏览器支持。

div {
    line-height: 50px;
    width: 100px;
    text-align: center;
    cursor: pointer;
    transition: border .2s ease-in-out;
    -webkit-transition: border .2s ease-in-out;
    -moz-transition: border .2s ease-in-out;
}

div:hover {
    border-top: 3px solid #000;
}

html, body {
    margin: 0;
    padding: 0;
}

div {
    line-height: 50px;
    width: 100px;
    text-align: center;
    cursor: pointer;
    transition: border-color .5s ease-in-out;
    border-top: 3px solid transparent;
}

div:hover {
    border-top-color: #000;
}

div {
  border: 3px solid transparent;
}

div:hover {
  border: 3px solid #f06;
}