我正在用 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>
如果您询问不同图像之间缺乏交叉淡入淡出插值,这是规范的一个非常新的补充,但尚未得到广泛支持。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)