显示元素时启动 CSS 动画

Question

我正在尝试使用 CSS 动画和关键帧为一些​​元素设置动画：

-webkit-animation: stamp 600ms ease-in-out 1;
   -moz-animation: stamp 600ms ease-in-out 1;
        animation: stamp 600ms ease-in-out 1;  

如果我通过 display:block/none 切换可见性；动画从一开始就在 Chrome 和现代 IE 中播放得很好，但在 Firefox 中却没有（未在 Safari 中测试）。

有没有办法在 Firefox 中也能做到这一点？

Here is a fiddle 我为测试而创建的。

Answer 1

在.badge 之后移动.hidden 并移除动画：

.hidden {
    animation: none;
    display: none;
}

Updated fiddle