CSS3动画背景不适用于Firefox

Val Do 发表于 Dev

瓦尔多

您好，我有这个示例，它可以正常运行chrome和Opera，但不能在Firefox中使用

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

维托里诺·费尔南德斯

您可以使用：pseudo元素添加background-image并更改其不透明度

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。