CSS3动画中的firefox背景图片

我在CSS中制作关键帧动画。由于支持-webkit语法，动画在Chrome中似乎运行良好。CSS3动画中的firefox背景图片

@-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>

来源

2012-10-02 Samarth Agarwal

您正在测试哪个版本的Firefox？ –

15.0.1的东西！我昨天刚刚下载了它... –

这应该工作，语法是完美的..你确定它失败了吗？ –

如果你问的是，缺乏不同的图像之间的交叉淡入淡出插值，这是一个非常新的除了没有被广泛尚不支持该规范。

来源

2012-10-02 20:21:30

我认为这就是我正在做的。我创建了两个图像，最初显示一个图像，然后切换到另一个图像，然后切换回原始图像。有没有其他方法可以达到同样的效果？请访问网站http://aspspider.org/samarth进行演示，使用chrome。第一季度网站的标题是我需要实现的。 –

这不起作用，因为Firefox不支持背景图片上的动画。背景图像不具动画性。 Chrome有它自己的实现，但你不会使它工作的Firefox。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

来源

2014-05-08 04:51:42 bhakti123

CSS3动画中的firefox背景图片

回答

相关问题