CSS关键帧动画在FF 27中不起作用

时间:2014-02-11 14:58:57

标签: css animation

我的一个项目有问题。我想通过添加动画背景图片来添加动画箭头。

它适用于谷歌浏览器,但不适用于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;
}

0 个答案:

没有答案