为什么我的字体颜色会在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>