如何让CSS transition仅作用于颜色变化，不对border-radius产生过渡效果？

解决方案 #

你当前代码的问题是transition属性使用了all关键字，会匹配所有可动画的属性变化，因此border-radius的变更也会触发过渡效果。只需要将all替换为你需要过渡的指定颜色类属性即可：

.FAQ-Question {
  /* 仅为color和background-color两个属性添加过渡效果，多个属性用逗号分隔 */
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.FAQ-Active, .FAQ-Question:hover {
  color: rgb(127, 255, 159);
  background-color: rgb(0, 0, 120);
}

.FAQ-Active {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

如果后续需要新增其他需要过渡的属性，直接用逗号追加到transition的属性列表中即可，只要不加入border-radius或all关键字，圆角变化就不会产生过渡效果。

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