Question

我在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>

Answer 1

如果你问的是不同图像之间缺少交叉渐变插值，那么这个版本的新增功能还没有被广泛支持。

Answer 2

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

CSS3动画中的Firefox的背景图像

2 个答案: