CSS Transition意外影响多属性：如何仅针对color属性实现过渡

你的问题出在transition属性的语法上。你写的transition: color, 10s;是错误写法——逗号在这里是用来分隔多个独立的过渡规则，而非属性和时长的分隔符。

正确的语法是用空格分隔目标属性与过渡时长：

transition: color 10s;

为什么原写法会影响所有属性？ #

当你写transition: color, 10s;时，浏览器会把它解析成两个过渡规则：

1. transition: color;（仅指定属性，时长默认0，但会被第二个规则覆盖）
2. transition: 10s;（仅指定时长，属性默认是all，即所有可过渡属性）

最终等价于transition: color 10s, all 10s;，所以所有属性都会应用10秒的过渡效果。

修正后的完整代码 #

.join-button{
    background-color: white;
    color : rgb(79, 139, 228);
    border-color:rgb(16, 46, 92); 
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;
    height: 36px;
    width: 62px;
    cursor: pointer;
    font-weight: 500;
    /* 修正后的transition写法 */
    transition: color 10s;
}

.join-button:hover{ 
    color: rgb(255, 255, 255);
    background-color:rgb(228, 79, 109);
    height: 100px;
}

修改后，只有color属性会在10秒内平滑过渡，background-color和height会瞬间变化，符合你的预期。

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