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>
如果您要问的是不同图像之间缺少淡入淡出插值,这是尚不被广泛支持的规范的新增功能。
This is not working because Firefox does not support animations on background images. Background-image is not animatable. Chrome has its own implementation but you won't get it working Firefox. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.