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 关键帧）。

在播放动画时调整 window 会使文本变得越来越大，直到它到达一个点，它从最小的尺寸开始，然后继续循环变大（取决于如何我增加了 window 大小）。诸如小号、中号、大号、超大号、小号、中号、大号、超大号、小号等，具体取决于浏览器的大小 window。

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

Answer 1

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

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

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

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

keyframes relative (vw) font-size weird behavior in IE

css

internet-explorer

font-size

keyframe

css-animations