странное поведение размера шрифта относительно ключевых кадров (vw) в IE

Question

У меня есть текстовый элемент, который использует размер шрифта 7vw и размеры правильно с IE.Я хочу воспроизвести на нем анимацию, которая со временем меняет размер шрифта с 7vw на 10vw и обратно на 7vw, но 7vw в анимации ключевых кадров по меньшей мере в 10 раз больше, чем 7vw, уже примененный к элементу.

Я пытался использовать другие единицы, такие как 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 был прост в настройке (у меня также есть ключевые кадры webkit, идентичные тем, что есть в IE).

Изменение размера окна во время воспроизведения анимации делает текст все больше и больше, пока он не достигнет точки, и он начинает с наименьшего размера и продолжает снова увеличиваться в цикле (В зависимости от того, насколько я увеличиваюразмер окна).Что-то вроде small, medium, large, xlarge, small, medium, large, xlarge, small и т. Д., В зависимости от размера окна браузера.

Примечание. Попробуйте выполнить скрипт в Chrome, а затем сравнить в IE сувидеть разницу.IE один прыгает в размере.

Answer 1

Я не мог заставить его работать с CSS. Я попытался увеличить, но это было ошибка в IE тоже. Я решил это с помощью следующего кода JQuery:

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

Я все еще заинтересован в решении ключевого кадра.