class - 每次应用类时的 CSS3 动画(Firefox 错误？)

Question

我在使用 Firefox(在 v17 中尝试过)时遇到了 CSS3 原生动画的一些问题，而 Chrome 没问题。

该示例也可在 Codepen 上获得: http://codepen.io/anon/pen/yxteC

下面也复制了代码。
我将一些类应用于某些元素(试图在悬停时将其与 JS 一起应用，但悬停本身的工作方式完全相同(:hover 选择器而不是 .hover 类) ).所以，问题是 在 Firefox 中动画只触发一次:第一次应用该类。 下次不会。
这在 Chrome 中完美运行。不过，我没有测试任何其他浏览器(IE 仍然没有广泛支持它，而 Opera ......好吧，现在我不太在意)。

更多细节:如果不隐藏/显示内部元素(display:none/block)，那么它在 Firefox 中工作正常(但这显然不是解决方案).

我真的要求不要添加任何与一般清洁度和可能的代码改进相关的评论。这只是一个例子。

HTML:

<div>
  <span>menu</span>
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  </ul>
</div>

CSS:

ul
{
    display: none;
}

div.hover ul
{
    display: block;
}

div li
{
    position: relative;
    top: -10px;
}
div.hover li
{
    -webkit-animation: filterAppear 0.5s;
       -moz-animation: filterAppear 0.5s;

    top: 0;
    opacity: 1;

    -webkit-animation: filterItemAppear 0.1s;
       -moz-animation: filterItemAppear 0.1s;
    -webkit-animation-fill-mode: backwards;
       -moz-animation-fill-mode: backwards;
}

div.hover li:nth-child(1)
{
    -webkit-animation-delay: 0.15s;
       -moz-animation-delay: 0.15s;
}
div.hover li:nth-child(2)
{
    -webkit-animation-delay: 0.35s;
       -moz-animation-delay: 0.35s;
}
div.hover li:nth-child(3)
{
    -webkit-animation-delay: 0.55s;
       -moz-animation-delay: 0.55s;
}


@-webkit-keyframes filterItemAppear
{
    from { opacity:0; top:-25px; }
    to { opacity:1; top:0; }
}
@-moz-keyframes filterItemAppear
{
    from { opacity:0; top:-25px; }
    to { opacity:1; top:0; }
}

Answer 1

我遇到了类似的问题，今天我会找到解决方案。

Firefox 必须以某种方式注意到 DOM 操作。所以我们必须添加.width()或者setTimeout。宽度解决方案更清洁 IMO。

查看我为您的示例编辑的 CodePen http://cdpn.io/yhbfB .

(更多信息请访问 http://css-tricks.com/restart-css-animation/)