CSS Animation 第一次加载时无法在 Firefox 上运行答案

【问题标题】：CSS Animation not working on Firefox the first time it loadsCSS Animation 第一次加载时无法在 Firefox 上运行
【发布时间】：2018-07-11 01:02:48
【问题描述】：

我有一个没有文本的小 div，当我将鼠标悬停在它上面时，会出现文本。当它出现时，我希望发生缩放动画。我的代码在 Chrome 和 Edge 上运行良好，但在 Firefox 上，第一次加载页面时缩放动画不起作用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @keyframes animatezoom{
            0%{transform:scale(0);}
            100%{transform:scale(1);}
        }
        .divClass{
            background: lightblue;
            height: 100px;
            width: 100px;
        }
        .textClass{
            display:none;
            animation:animatezoom 0.6s;
        }
        .divClass:hover .textClass{
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="divClass">
        <p class="textClass">Text</p>
    </div>
</body>
</html>

我正在使用 Firefox Quantum 58.0.1

Here is a fiddle。（请确保在悬停后单击“运行/刷新”，因为缺少动画只会在代码第一次运行时发生）

【问题讨论】：

在 FF 52 ESR 和 FF 60 Nightly 中都能正常工作。（文本“文本”出现在悬停时无需显式运行或刷新。）
但是它会在第一次加载动画时做动画吗？
是的，它有动画效果。

标签： css firefox

【解决方案1】：

您必须在悬停时设置动画：

    .textClass {
      display: none;
    }

    .divClass:hover .textClass {
      animation: animatezoom 0.6s;
      display: inline-block;
    }

【讨论】：