1

我正在用 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>
4

2 回答 2

1

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

于 2012-10-02T20:21:30.227 回答
0

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

于 2014-05-08T04:51:42.887 回答