Question

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

在边框上的颜色效果很好，但是即使我在第一个过渡中设置了“ ease-in-out”，它仍然是“线性”的，但我仍然注意到它们在图标上-图标从底部进入就像是将它们向上推-希望它们只是以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过渡淡入淡出在开始时是线性的

1 个答案: