在CSS3动画背景图片为Firefox [英] background-image for firefox in CSS3 animations

问题描述

我在CSS制作关键帧动画。动画似乎在Chrome中工作得很好的-webkit语法的支持。

  @  -  WebKit的关键帧title_toggle
{
从{背景图像：网址（图像/ title.png）; }
75％{背景图像：网址（图像/ title_hover.png）; }
为{背景图像：网址（图像/ title.png）; }
}
 

我试过下面的火狐code，但它不工作

  @  -  MOZ关键帧title_toggle {
从{背景图像：网址（图像/ title.png）; }
75％{背景图像：网址（图像/ title_hover.png）; }
为{背景图像：网址（图像/ title.png）; }
}
 

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

这是CSS的一部分。

  @  -  MOZ关键帧title_toggle {
从{背景图像：网址（图像/ title.png）; }
75％{背景图像：网址（图像/ title_hover.png）; }
为{背景图像：网址（图像/ title.png）; }
}。标题{
    宽度：40％;
    高度：30％;
    位置：绝对的;
    前10名％;
    左：5％;
    背景尺寸：100％100％;
    背景重复：不重复;
    -webkit-动画名称：title_toggle;
    -webkit-动画持续时间：5秒;
    -webkit-动画迭代计数：无限;
    背景尺寸：100％100％;
     -moz-动画名称：title_toggle;
     -moz-动画持续时间：5秒;
     -moz-动画迭代计数：无限;
}
 

这是HTML

 ＆LT; D​​IV CLASS =标题＆GT;＆LT; / DIV＆GT;
 

解决方案

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

I am making keyframe animation in CSS. The animation seems to be working very well in Chrome as the -webkit syntaxes are supported.

@-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); }
}

I tried the code below for Firefox, but its not working

@-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); }
}

Please let me know I would this work in FF.

This is the CSS part.

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

And this is the HTML

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

解决方案

If you're asking about the lack of cross-fade interpolation between different images, that's a very new addition to the spec that's not widely supported yet.

这篇关于在CSS3动画背景图片为Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！