CSS Keyframes无限旋转动画移动端跨页偶发transform失效求助

问题表现 #

• 目标无限旋转动画应用于移动端菜单，跨页面跳转时偶发失效，故障无稳定复现规律，并非每次跳转都会触发
• 使用Chrome浏览器Inspector（检查）模式模拟移动端开展跨页测试时，动画从未出现异常
• 移动端真机访问场景下，偶发故障具体表现为@keyframes规则内的transform属性未被应用，其余CSS属性均正常加载

现有实现代码 #

当前动画相关CSS代码如下：

.navmenu-navlink > span {
  transition: all 300ms ease;
}

.navmenu-navlink-mobile:nth-child(odd) {
  animation-name: spinClockwise;
  animation-duration: 90000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}
.navmenu-navlink-mobile:nth-child(even) {
  animation-name: spinAntiClockwise;
  animation-duration: 90000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes spinClockwise {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
@keyframes spinAntiClockwise {
  from {-webkit-transform:rotate(360deg);}
  to {-webkit-transform:rotate(0deg);}
}

已尝试修复手段 #

目前已尝试以下方案，均未解决故障：

• 为动画相关CSS属性添加-webkit-、-moz-等各类浏览器厂商前缀
• 配置动画延迟参数，在document.ready()回调中手动触发动画
• 调整动画默认状态为animation-play-state: paused，实现点击汉堡菜单按钮时启动动画、点击菜单项后暂停动画的交互逻辑

内容的提问来源于stack exchange，提问作者Blagovest Bonchev