0

我在使用 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; }
}
4

1 回答 1

1

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

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

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

（有关它的更多信息，请访问http://css-tricks.com/restart-css-animation/）

于 2013-01-21T13:22:23.443 回答