Question

CSS3原生动画存在一些问题我已经碰到了Firefox（在第17版中尝试过），而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/的更多信息）

每次应用类时都会产生CSS3动画（Firefox bug？）

1 个答案: