Transition in firefox (background-image)?

Question

css

The code:

.item{
    display: inline-block;
    vertical-align: top;
    height: 17px;
    margin-right: 2px;
    transition: all 0.2s
}
.item.vk{
    width: 30px;
    background: url('data:image/png;base64,...') no-repeat center}
.item.twit{
    width: 23px;
    background: url('data:image/png;base64,...') no-repeat center}
.item.ok{
    width: 19px;
    background: url('data:image/png;base64,...') no-repeat center}
.item.insta{
    width: 18px;
    background: url('data:image/png;base64,...') no-repeat center}
.item.vk:hover{background: url('data:image/png;base64,...') no-repeat center}
.item.twit:hover{background: url('data:image/png;base64,...') no-repeat center}
.item.ok:hover{background: url('data:image/png;base64,...') no-repeat center}
.item.insta:hover{background: url('data:image/png;base64,...) no-repeat center}

In firefox, the transition property set does not work, the -moz- prefix does not solve the problem The
question remained open, I found a way out: we will change not the image but the position of the image by combining the icons into one:

footer .footer-social-item{
    display: inline-block;
    vertical-align: top;
    height: 19px;
    margin-right: 2px;
    transition: all 0.30s linear 0s;
    background-repeat: no-repeat;
    background-position: 0 0;
}
footer .footer-social-item.vk{
    width: 30px;
    background-image: url('data:image/png;base64,...')}
footer .footer-social-item.twit{
    width: 23px;
    background-image: url('data:image/png;base64,...')}
footer .footer-social-item.ok{
    width: 19px;
    background-image: url('data:image/png;base64,...')}
footer .footer-social-item.insta{
    width: 18px;
    background-image: url('data:image/png;base64,...')}
footer .footer-social-item:hover{background-position: 0 -19px}

Answer 1

transition: all 0.2s
no animation set, should be
transition: all 0.2s ease