添加浏览器前缀后Firefox中多参数rotate属性动画失效问题

问题原因 #

核心是两个浏览器特性叠加导致的：

• 前缀@keyframes的新特性适配废弃
  Firefox 早在 16 版本就已经全面支持标准无前缀的@keyframes规则，之后就停止了对老旧前缀规则@-moz-keyframes的新特性兼容。你使用的四参数rotate语法属于较新的CSS独立变换属性扩展，仅在标准@keyframes中被Firefox支持，写在@-moz-keyframes里的四参数rotate会被判定为无效语法，整个带前缀的动画规则会被识别为空动画。
• 同前缀动画优先级更高
  你在:hover规则中同时声明了带前缀的-moz-animation-name: object-skew和标准animation-name: object-skew，Firefox会优先匹配同名的带前缀@-moz-keyframes规则，哪怕该规则内部属性全部无效，也不会降级使用后面的标准@keyframes，最终就出现了动画不触发的问题。

为什么替换为transform: rotate3d后恢复正常 #

rotate3d是CSS Transform中早就标准化的属性，老旧的@-moz-keyframes规则对它的支持是完整的，即便Firefox优先调用了带前缀的动画规则，内部的属性也能被正确解析，所以两个版本的代码都能正常运行。

仅保留Firefox支持的最简修复方案 #

直接删除所有带厂商前缀的@-webkit-keyframes、@-moz-keyframes、@-o-keyframes规则，以及对应的-webkit-*、-moz-*、-o-*开头的动画属性，仅保留标准无前缀的动画相关代码即可。

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