css - IE 中的关键帧相对 (vw) 字体大小奇怪的行为

Question

我有一个文本元素，它使用 7vw 的字体大小，并且在 IE 中大小正确。我想在其上播放一个动画，随着时间的推移将字体大小从 7vw 更改为 10vw 再回到 7vw，但关键帧动画中的 7vw 至少是已应用于元素的 7vw 的 10 倍。

我曾尝试使用其他单位，如 em、pt 和 %。我还尝试设置 body font-size 以使用 em 单位。此外，我尝试将它作为 HTML 中其他元素的父级，但无济于事。

.text-bot {
    padding-top: 10vw;
    font: bold 7vw Calibri;
    text-transform: uppercase;
    color: #009999;
    z-index: 50;
    -webkit-animation: text-bounce 1s linear;
    -moz-animation: text-bounce 1s linear;
    animation: text-bounce 1s linear;
}

@keyframes text-bounce {
    0% {
        font-size: 7vw;
    }

    10% {
        font-size: 12vw;
    }

    100% {
        font-size: 7vw;
    }
}

<b class="text-bot anim-text" id="count">0</b> 

考虑到动画将它应用于同一元素，我预计 7vw 会保持 7vw。相反发生的是动画中的 7vw 跳出所有边界，超过预期大小的 10 倍。 如果我从 .text-bot 中删除动画，它的大小都正确并且运行良好。

这一切都在 IE 中，Chrome 很容易设置(我也有与 IE 相同的 webkit 关键帧)。

在播放动画时调整窗口大小会使文本变得越来越大，直到它到达一个点并且它从最小的尺寸开始并继续循环变大(取决于我增加了多少窗口尺寸).诸如小号、中号、大号、超大号、小号、中号、大号、超大号、小号等，具体取决于浏览器窗口的大小。

注意:在 Chrome 中试用该脚本，然后在 IE 中进行比较以查看差异。 IE 的大小跳跃。

Answer 1

我无法让它与 css 一起工作。我试过缩放，但在 IE 中也有问题。我用下面的 JQuery 代码解决了这个问题:

        $('#count').stop().animate({ fontSize: '8vw' }, { duration: 100 })
            .animate({ fontSize: '7vw' }, {
                duration: 900
            });

我仍然对关键帧解决方案感兴趣。