animation - 背景 css 动画在 firefox 上不起作用

Question

我有一些 CSS 动画按钮。

.bottom_panel ul li.bottom_panel_button_04 {
    background: url('../img/bottom_panel_icons/ap_bottom_panel_back_button_01_131.png') center center no-repeat;
    -webkit-animation: myfirst 2s linear infinite;
    -moz-animation: myfirst 2s linear infinite;
    -ms-animation: myfirst 2s linear infinite;
    -o-animation: myfirst 2s linear infinite;
    animation: myfirst 2s linear infinite;
}

@-moz-keyframes myfirst {
    0% {background: url('../img/bottom_panel_icons/ap_bottom_panel_back_button_01_131.png') center center no-repeat;
    }
    50% {background: url('../img/bottom_panel_icons/ap_bottom_panel_back_button_01_131_on.png') center center no-repeat;
    }
    100% {background: url('../img/bottom_panel_icons/ap_bottom_panel_back_button_01_131.png') center center no-repeat;
    }
}

在 Chrome 上一切都很好，但 Firefox 无法触发此动画……出了什么问题？

Answer 1

Replace @-moz-keyframesto @keyframes and add @-webkit-keyframes for Saffari and Chrome (and all Chromium-based browsers)
You can see an example here.
And here is the link to your (working) example.