CSS3 动画中 Firefox 的背景图像答案

【问题标题】：background-image for firefox in CSS3 animationsCSS3 动画中 Firefox 的背景图像
【发布时间】：2012-09-23 00:03:06
【问题描述】：

我正在用 CSS 制作关键帧动画。由于支持 -webkit 语法，因此动画在 Chrome 中似乎运行良好。

@-webkit-keyframes title_toggle 
{
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

我为 Firefox 尝试了下面的代码，但它不起作用

@-moz-keyframes title_toggle {
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

请让我知道我会在 FF 中进行这项工作。

这是 CSS 部分。

@-moz-keyframes title_toggle {
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

.title{
    width:40%;
    height: 30%;
    position: absolute;
    top: 10%;
    left: 5%;
    background-size: 100% 100%;
    background-repeat:no-repeat;
    -webkit-animation-name: title_toggle;
    -webkit-animation-duration:5s;
    -webkit-animation-iteration-count:infinite;
    background-size: 100% 100%; 
     -moz-animation-name: title_toggle;
     -moz-animation-duration:5s;
     -moz-animation-iteration-count:infinite;
}

这是 HTML

<div class="title"></div>

【问题讨论】：

您测试的是哪个版本的 Firefox？
15.0.1 的东西！我昨天刚下载...
这应该可行，语法完美..你确定它失败了吗？
是的...等等，让我发布完整的 CSS 和 HTML。
网站在aspspider.org/samarth工作，用chrome和firefox查看

标签： html css firefox animation keyframe

【解决方案1】：

如果您要问的是不同图像之间缺乏交叉淡入淡出插值，那是规范的一个非常新的补充，尚未得到广泛支持。

【讨论】：

我认为这就是我正在做的事情。我创建了两张图像，最初显示一张，然后切换到另一张，然后又变回原始图像。有没有其他方法可以达到同样的效果？请参阅网站aspspider.org/samarth 以查看演示，使用 chrome。第一季度的网站标题是我需要达到的。

【解决方案2】：

这不起作用，因为 Firefox 不支持背景图像上的动画。背景图像是不可动画的。 Chrome 有自己的实现，但你不会让它在 Firefox 中运行。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

【讨论】：