CSS3动画背景在Firefox上无法工作

Question

你好，我有一个例子，它在Chrome和Opera上运行良好，但在Firefox上无法正常工作。

在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');
    }
}

- Val Do

---

你应该查看这个链接：https://dev59.com/hnTYa4cB1Zd3GeqPx7fW - Naisheel Verdhan

你可以使用这个解决方法：- https://jsfiddle.net/4x3k7Lxy/4/ - Vitorino fernandes

谢谢，请回答我的问题，我会批准 :) - Val Do

added it as a answer :) - Vitorino fernandes

Answer 1

你可以使用伪元素来添加背景图片并更改其不透明度。

演示 - https://jsfiddle.net/4x3k7Lxy/4/

- Vitorino fernandes