Firefox 中的 CSS3 动画和背景图像

Posted 2023-03-06

【中文标题】Firefox 中的 CSS3 动画和背景图像

【英文标题】：CSS3 animation and background-image in Firefox

【发布时间】：2013-07-20 09:32:47

【问题描述】：

我的网站中有一些 CSS3 动画，它在 Safari 上运行良好，但是当我在 Firefox 中运行该网站时，它没有动画。代码如下：

.ad
position:relative;
left:740px;
top:240px;
width:260px;
height:195px;
background-image:url('ad1.png');

animation:myfirst 4s; 

-webkit-animation:myfirst 4s; /* Safari and Chrome */
-webkit-animation-delay:2s;
-webkit-animation-duration:0s;
-webkit-animation-fill-mode: forwards;


@keyframes myfirst 

 
  from background-image:url('ad1.png')
  to background-image:url('ad2.png')

 


@-webkit-keyframes myfirst /* Safari and Chrome */
 
  from background-image:url('ad1.png');
  to background-image:url('ad2.png');
 

现在我注意到当网站点击

 background-image:url('');

如果我将这些更改为

 background:color;  

然后它可以工作，但显然我想使用图像。我试过添加 -moz- 前缀，但它不起作用。我错过了什么？有没有办法让firefox承认

Background-image:url('')

【问题讨论】：

图片文件和这个CSS文件在同一个目录吗？

你可以在 FF 中使用不同的容器来伪造它。每个元素可以有 2 个额外的伪容器 ::before 和 ::after 。例如：codepen.io/gcyrillus/pen/DJdja :)

【参考方案1】：

根据latest working draft of the spec（2015 年 8 月 14 日），background-image 被定义为不可动画。

那么，Firefox 只是遵循规范，而动画 background-image 的浏览器的行为是非标准的，不应依赖。

【参考方案2】：

到目前为止，在背景图像之间进行插值的能力是一个相当新的提议，并且在浏览器中没有得到很好的支持。 Firefox 还没有实现它。

【讨论】：

悲伤的脸！不过它非常有用。

【参考方案3】：

使用@-moz-keyframes 和 -moz 动画 为Firefox定义动画

【讨论】：

可以粘贴firefox对应的css吗？