css - CSS动画在首次加载时无法在Firefox上运行

我有一个没有文本的小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。（请确保在执行悬停后单击“运行/刷新”，因为缺少动画只会在代码第一次运行时发生）

最佳答案

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

    .textClass {
      display: none;
    }

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