CSS3 animation background not work on firefox

Question

Hello I have this example, it's work fine chrome and opera but not work in firefox

check on fiddle

    body {
    width: 100%;
    height: 100%;
    background: url('http://www.picz.ge/img/s2/1505/17/1/1b588904a0d2.png');
    -webkit-animation: mymove 10s;
    /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    /* Chrome, Safari, Opera */
    -moz-animation: mymove 10s;
    -moz-animation-iteration-count: infinite;
    animation: mymove 10s;
    animation-iteration-count: infinite;
}
@-webkit-keyframes mymove {
    from {
        background: url('http://www.picz.ge/img/s2/1505/17/1/1b588904a0d2.png');
    }
    to {
        background: url('http://www.picz.ge/img/s4/1505/17/b/b2c36d72aaa6.png');
    }
}
@-moz-keyframes mymove {
    from {
        background: url('http://www.picz.ge/img/s2/1505/17/1/1b588904a0d2.png');
    }
    to {
        background: url('http://www.picz.ge/img/s4/1505/17/b/b2c36d72aaa6.png');
    }
}
@keyframes mymove {
    from {
        background: url('http://www.picz.ge/img/s2/1505/17/1/1b588904a0d2.png');
    }
    to {
        background: url('http://www.picz.ge/img/s4/1505/17/b/b2c36d72aaa6.png');
    }
}

Answer 1

You can use a :pseudo element to add a background-image and change its opacity

demo - https://jsfiddle.net/4x3k7Lxy/4/