CSS3 transition of background-image for Firefox not working solution

CSS:
Add this on style or css file
.hr-box
{
    width: 400px;
    height: 150px;
    position: relative;
    border: 1px solid green;
}

.hr-box:before, .hr-box:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 1;
}
.hr-box:before {
    background-image: url(hr-img1.jpg);
    z-index: 1;
    transition: opacity 2s;
}

.hr-box:after {
    background-image: url(hr-img2.jpg);
}

.hr-box:hover:before {
    opacity: 0;
}

HTML: 
Add this on body tag
<div class="hr-box"></div>

Webtechpie.com