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

Question

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

边框颜色完美，但我注意到图标，即使我设置了 'ease-in-out' 第一个过渡，它仍然是 'linear' - 图标从底部出现，就像有什么东西把它们向上推- 我希望它们只是以 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;

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

CSS transition fade in-out is linear at start

css

css-transitions