时间戳

首页 > 解决方案 > IE中的关键帧相对（vw）字体大小奇怪的行为

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

问题描述

我有一个文本元素，它使用 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 关键帧）。

在播放动画时调整窗口大小会使文本变得越来越大，直到它到达一个点，它从最小的大小开始并在循环中继续变大（取决于我增加了多少窗口大小）。像 small、medium、large、xlarge、small、medium、large、xlarge、small 等，取决于浏览器窗口的大小。

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

标签： cssinternet-explorercss-animationsfont-sizekeyframe

解决方案

我无法让它与 css 一起使用。我尝试了缩放，但这也在 IE 中被窃听。我用下面的 JQuery 代码解决了这个问题：

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

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

推荐阅读