如何在CSS中实现正确的过渡效果？输入框失焦时过渡无动画的解决方法

嘿，这个问题我之前也碰到过！核心原因其实很简单：你没给input设置明确的默认背景色。

当输入框聚焦时，你把背景色改成了aqua，浏览器知道从“当前状态”过渡到这个值；但失焦时，它不知道要过渡回什么——因为你没定义默认的background-color，浏览器就直接跳转到自身的默认样式（一般是白色），跳过了过渡动画。

快速修复方案 #

只需要在基础的input选择器里加上明确的默认背景色，并且把transition属性只放在基础样式里就行（不用在:focus里重复写，过渡规则会继承）：

input {
  background-color: #fff; /* 和浏览器默认背景色保持一致即可 */
  transition: background-color 1s; /* 指定具体过渡属性更高效，也可以用transition: 1s; */
}

input:focus {
  background-color: aqua;
  /* 这里不需要再写transition了 */
}

为什么这样有效？ #

现在浏览器有了明确的“起始值”（#fff）和“结束值”（aqua）：

• 聚焦时：从#fff平滑过渡到aqua
• 失焦时：从aqua平滑过渡回#fff

如果你想让所有可过渡的CSS属性都应用动画，也可以继续用transition: 1s;，但指定具体属性（比如background-color）能避免不必要的性能消耗，更推荐这种写法。

把你的CSS换成上面的代码，再测试一下——不管聚焦还是失焦，过渡动画都会平滑生效啦！

内容的提问来源于stack exchange，提问作者user19319815