html - 为什么div转换时我的字体颜色会改变？

Question

这也是 jsfiddle 上的 https://jsfiddle.net/phmttrsh/

#btn {
    font-size: 16px;
    height: 34px;
    width: 120px;
    border: 1px solid #20ACB3;
    text-align: center;
    line-height: 34px;
    background-color: #20ACB3;
    color: #ffffff;
    border-radius: 5px;
    transition: transform 200ms cubic-bezier(0.25, 0.39, 0.39, 2.01);
}

 #btn:hover {
        cursor: pointer;
        transform: scale(1.05);
    }

<div id="btn">Click</div>

当鼠标悬停在按钮上时，字体颜色也会在很短的时间内发生变化，并且只发生在 safari 上。

为什么会发生这种情况？

Answer 1

#btn {
    font-size: 16px;
    height: 34px;
    width: 120px;
    border: 1px solid #20ACB3;
    text-align: center;
    line-height: 34px;
    background-color: #20ACB3;
    color: #ffffff;
    border-radius: 5px;
    -webkit-transition : transform 200ms cubic-bezier(0.25, 0.39, 0.39, 2.01) , color 200ms; 
   -moz-transition : transform 200ms cubic-bezier(0.25, 0.39, 0.39, 2.01) , color 200ms;
    -o-transition : transform 200ms cubic-bezier(0.25, 0.39, 0.39, 2.01) , color 200ms; 
    transition : transform 200ms cubic-bezier(0.25, 0.39, 0.39, 2.01) , color 200ms; 
}

 #btn:hover {
        cursor: pointer;
        transform: scale(1.05);
        color:#fff
    }

<div id="btn">Click</div>