Question

这是页面（在标题部分：经历一个地方 - 在你到达之前，在FF，你只会看到一块鲑鱼的照片，如果它有效，你也会看见红酱汁和酸橘汁腌鱼肉。）

http://www.celebritycruises.com/htmlpage/html-page-test

我使用CSS3 animate属性来更改其中一个切片的背景图像。适用于Chrome，Safari，IE 10+，但它不适用于FF（有或没有-moz - ）

有什么想法吗？

main #onboard section:nth-child(3) section:nth-of-type(1) {
    animation:pulse 5s infinite;
    background:url(/media/en_US/images/cel_deployment/Global_Culinary/800x400/food01_800x400.jpg) center center no-repeat;
    background-size:cover;
    height:55%;
}
@keyframes pulse {
33% {
    background:url(/media/en_US/images/cel_deployment/Global_Culinary/800x400/food02_800x400.jpg) center center no-repeat;
    background-size:cover;
}
66% {
    background:url(/media/en_US/images/cel_deployment/Global_Culinary/800x400/food03_800x400.jpg) center center no-repeat;
    background-size:cover;
}
99% {
    background:url(/media/en_US/images/cel_deployment/Global_Culinary/800x400/food01_800x400.jpg) center center no-repeat;
    background-size:cover;
}
}

Answer 1

这可能就是答案。据此，背景图像属性不应该是可动画的。这并不意味着它不能动画，因为Chrome，Safari和IE都可以。

http://www.w3.org/TR/2014/CR-css3-background-20140909/#background-image

仅限CSS3的轮播无法在Firefox中运行

1 个答案: