仅 CSS3 的轮播在 Firefox 中不起作用

Posted 2023-03-06

【中文标题】仅 CSS3 的轮播在 Firefox 中不起作用

【英文标题】：CSS3-only carousel not working in firefox

【发布时间】：2016-03-08 19:37:09

【问题描述】：

这是页面（在标题为：体验一个地方 - 在你到达那里之前到右边的部分中，在 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;

【参考方案1】：

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

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