Animation 如何摆脱手机上的文字动画flash

我正在按照这个代码笔构建一个字幕：

它可以在桌面上正常工作，但在手机上文本会闪烁（可能需要放大才能看到）。这也发生在所有的移动浏览器上，所以不存在浏览器问题。我怎样才能摆脱闪光灯？我尝试了很多推荐的解决方案，如：

transform: translate3d(0);
backface-visibility: hidden;
perspective: 1000;

我试过了span和外部div，但似乎没有解决它。我不确定这个问题是否是因为使用文本阴影复制文本以创建字幕效果，或者文本宽度与移动屏幕大小相比太大，但是这个解决方案最适合我的需要，所以我希望保留它

---

我怎么才能摆脱闪光灯？！SOS它需要太多的脑力，这很伤人

我相信它会奏效的

 @media only screen and (max-width : 768px) {
    .animated {
        /*CSS transitions*/
        -o-transition-property: none !important;
        -moz-transition-property: none !important;
        -ms-transition-property: none !important;
        -webkit-transition-property: none !important;
        transition-property: none !important;
        /*CSS transforms*/
        -o-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -webkit-transform: none !important;
        transform: none !important;
        /*CSS animations*/
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
    }
}