Question

我有一个使用7vw字体大小和IE正确大小的文本元素。我想播放一个动画，该动画会随着时间将字体大小从7vw更改为10vw，然后又更改回7vw，但是关键帧动画中的7vw至少是已应用于该元素的7vw的10倍。

我尝试使用其他单位，例如em，pt和％。我也尝试设置主体字体大小以使用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关键帧）。

在播放动画的同时调整窗口大小，使文本变得越来越大，直到达到一个点为止，并且从最小的大小开始，然后继续循环增大（取决于我增加窗口大小的多少））。诸如小，中，大，xlarge，小，中，大，xlarge，小等之类的东西，取决于浏览器窗口的大小。

注意：尝试在Chrome中运行脚本，然后在IE中进行比较以查看区别。 IE的大小会增加。

Answer 1

我无法使其与CSS一起使用。我尝试过缩放，但这在IE中也存在问题。我使用以下JQuery代码解决了该问题：

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

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

IE中的关键帧相对（vw）字体大小怪异行为

1 个答案: