我的一个项目有问题。我想通过添加动画背景图片来添加动画箭头。
它适用于谷歌浏览器,但不适用于FF。
这是一个页面:http://web4u.rzeszow.pl/puppy/。
请帮忙。
@-moz-keyframes arrow {
0% {
background-image: url(strzala1.png);
}
10% {
background-image: url(strzala2.png);
}
25% {
background-image: url(strzala3.png);
}
35% {
background-image: url(strzala4.png);
}
45% {
background-image: url(strzala5.png);
}
65% {
background-image: url(strzala6.png);
}
80% {
background-image: url(strzala7.png);
}
95% {
background-image: url(strzala8.png);
}
100% {
background-image: url(strzala9.png);
}
}
@-webkit-keyframes "arrow" {
0% {
background-image: url(strzala1.png);
}
10% {
background-image: url(strzala2.png);
}
25% {
background-image: url(strzala3.png);
}
35% {
background-image: url(strzala4.png);
}
45% {
background-image: url(strzala5.png);
}
65% {
background-image: url(strzala6.png);
}
80% {
background-image: url(strzala7.png);
}
95% {
background-image: url(strzala8.png);
}
100% {
background-image: url(strzala9.png);
}
}
@keyframes arrow {
0% {
background-image: url(strzala1.png);
}
10% {
background-image: url(strzala2.png);
}
25% {
background-image: url(strzala3.png);
}
35% {
background-image: url(strzala4.png);
}
45% {
background-image: url(strzala5.png);
}
65% {
background-image: url(strzala6.png);
}
80% {
background-image: url(strzala7.png);
}
95% {
background-image: url(strzala8.png);
}
100% {
background-image: url(strzala9.png);
}
}
#strzala {
width: 185px;
height: 90px;
background-image: url(strzala.png);
position: relative;
left: 450px;
top: 60px;
-webkit-animation: arrow 3s infinite alternate;
-moz-animation: arrow 3s infinite alternate;
-ms-animation: arrow 3s infinite alternate;
animation: arrow 3s infinite alternate;
}