Webkit transition is working in chrome but not firefox

Question

#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;
}

The fact that the transition is not working isn't a major problem, but I would like to get it to work if possible. Should I be transitioning in some other way that is more widely compatible with browsers or is it just not supported in FireFox?

Answer 1

use prefix for cross browser

For chrome ,safari , use prefix : -webkit

For firefox use -moz

Ref: https://developer.mozilla.org/en/docs/Web/CSS/transition

Use

#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;
}