动态注入CSS @keyframes不适用于Android

Question

我在javascript中动态地在DOM中注入关键帧时遇到了问题。

我正在DOM中注入关键帧：

javascript

    var keyframes = '@keyframes traveler { ';
        keyframes += '0% { left: 0; } ';
        keyframes += '100% { left: '+travelerPosition+'px; } ';
        keyframes += '}';

    $('#traveler').empty().append(keyframes); //This is the <style> tag

    $('.traveler').removeClass('animated').addClass('animated'); //This is the div that needs to be animated

每次travelerPosition都有新值时，都会执行此javascript代码。

css (sass)

.traveler {
    left: 0;
    position: absolute;

    &.animated {
        animation-name: traveler;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }
}

在我的计算机上运行正常，在Chrome和Safari上进行了测试。它也适用于iPhone和iPad。但我对Android设备有一个问题，动画根本不想运行，我找不到原因。

你有什么建议吗？

由于