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

将@-moz-keyframes替换为@keyframes并为Safari和Chrome（以及所有基于Chromium的浏览器）添加@-webkit-keyframes 您可以看到示例here here是指向（工作）示例的链接。

背景css动画不在firefox工作

1 个答案: