Webkit 转换在 chrome 中工作，但不是在 firefox答案

【问题标题】：Webkit transition is working in chrome but not firefoxWebkit 转换在 chrome 中工作，但不是在 firefox
【发布时间】：2015-09-03 01:42:55
【问题描述】：

#overlay_contact_us{
    position: relative;
    height:60px;
    width: 200px;
    display: table;
    margin: 0 auto;
    padding: auto 100%;
    vertical-align: middle;
    text-align: center;
    line-height: 60px;
    font-size: 25px;
    border-radius: 15px;
    border: 3px solid rgb(255,225,255);
    background-color: rgba(0,0,0,.4);
    -webkit-transition: background-color .35s linear;
}
#overlay_contact_us:hover{
    background-color: rgba(45,139,198,.6);
    -webkit-transition: background-color 0s linear;
}

过渡不起作用这一事实并不是一个大问题，但如果可能的话，我希望它能够起作用。我应该以与浏览器更广泛兼容的其他方式进行转换，还是只是在 FireFox 中不支持？

【问题讨论】：

对其他浏览器使用transition: background-color 0s linear;。 -webkit- 前缀适用于 chrome 和 safari

标签： html css google-chrome firefox webkit

【解决方案1】：

跨浏览器使用前缀

对于 chrome ，safari，使用前缀：-webkit

Firefox 使用 -moz

参考：https://developer.mozilla.org/en/docs/Web/CSS/transition

使用

#overlay_contact_us{
    position: relative;
    height:60px;
    width: 200px;
    display: table;
    margin: 0 auto;
    padding: auto 100%;
    vertical-align: middle;
    text-align: center;
    line-height: 60px;
    font-size: 25px;
    border-radius: 15px;
    border: 3px solid rgb(255,225,255);
    background-color: rgba(0,0,0,.4);
    -webkit-transition: background-color .35s linear;
    -moz-transition: background-color .35s linear;
    transition: background-color .35s linear;
}
#overlay_contact_us:hover{
    background-color: rgba(45,139,198,.6);
    -webkit-transition: background-color 0s linear;
     -moz-transition: background-color 0s linear;
    transition: background-color 0s linear;
}

【讨论】：