CSS过渡淡入淡出在开始时是线性的

Question

如果输入的值正确与否，我有一个可以更改边框颜色（红-绿）的表单 - 我还在每个字段末尾的两个小图标（glyphicon-ok 和 glyphicon-remove）之间进行更改。 我想在边框颜色和图标上添加过渡效果（缓入出局）。

在边框颜色上效果很好，但我注意到图标上即使我设置了“缓入”第一个过渡它仍然是“线性” - 图标从底部进入，就像有什么东西把它们向上推一样 - 我希望它们只是以 0.2 秒的过渡出现。

这是我的图标 css：

.start-label .glyphicon-ok  {
  position: absolute;
  font-size: 25px;
  top: 19px;
  right: 10px;
  color: #ACCB71;
  transition: 0.2s ease-in-out;
}

.start-label .glyphicon-remove  {
  position: absolute;
  font-size: 25px;
  top: 19px;
  right: 10px;
  color: #CC3E44;
  transition: 0.2s ease-in-out;
}

我的整个 css 代码中只有这些过渡和边框。 边框的过渡如下：

transition: border 0.2s ease-in-out;

我在这里做错了什么？或者这就是它应该如何工作的？

Answer 1

感谢 Dorvalla 的帮助，我通过在颜色上指定过渡解决了这个问题。

发件人：

transition: 0.2s ease-in-out;

收件人：

transition: color 0.2s ease-in-out;