CSS hover过渡效果失效求助：背景变化无过渡时长

嘿，我知道问题出在哪了！你遇到的这个过渡失效的情况，是因为浏览器没法在纯色背景和径向渐变之间直接做动画过渡——这俩属于不同的background属性类型，浏览器不知道怎么平滑衔接它们。

解决方案：统一背景类型 #

把初始状态的background也改成渐变类型（哪怕是看起来和纯色一样的渐变），这样浏览器就能识别并执行过渡动画了。

修改后的CSS代码如下：

.open{ 
  /* 用同色渐变替代纯色，和hover状态的背景类型统一 */
  background: radial-gradient(yellowgreen, yellowgreen); 
  color: black; 
  transition: background 2s ease-in; 
  /* 现代浏览器已无需前缀，如需兼容旧版可保留 */
  /* -moz-transition: background 2s ease-in; */
  /* -webkit-transition: background 2s ease-in; */
  /* -o-transition: background 2s ease-in; */
} 

.open:hover{ 
  background: radial-gradient(GreenYellow, yellowgreen); 
}

额外说明 #

• 这样修改后，初始状态的视觉效果和之前的纯色完全一致，但因为是渐变类型，hover时就能和目标渐变平滑过渡了。
• 现在主流浏览器（Chrome、Firefox、Edge等）都支持标准的transition属性，那些前缀属性（-moz-、-webkit-等）已经可以不用了，除非你需要兼容非常老旧的浏览器版本。

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