css - Why doesn't Firefox change background image smoothly?

Question

This transition is smooth in Chrome, but Firefox and IE change it from one to another without smooth transition.

.bstrap.footer-logo {
    background: url("../img/bootstrap_bw.png") no-repeat;
    background-size: contain;
    height: 64px;
    /*cursor: pointer;*/
}

.bstrap.footer-logo:hover {
    background: url("../img/bootstrap.png") no-repeat;
    background-size: contain;
    height: 64px;
    /*cursor: pointer;*/
}

.footer-logo {
    transition: background .5s ease-in-out;
    -moz-transition: background .5s ease-in-out;
    -webkit-transition: background .5s ease-in-out; /* Safari */
}