CSS字体风格的动画在Safari和Firefox中不起作用

我正在制作一个非常简单的动画，在这个动画中，我的字体在很短的时间内从法线变为斜体。它在Chrome上运行良好，但Safari和Firefox并不合作。在互联网上到处搜索答案，结果什么都没用！我已经包含了webkit前缀，甚至尝试了按名称、持续时间等来分离属性

我在两台不同的计算机上使用较旧和较新版本的Safari。首先是2012年开始在Macbook Pro上运行的Safari 6.2（OS X 10.8.5）。第二种是在27英寸iMac（El Capitan）上运行的Safari 9

就像我说的，它可以在Chrome上运行（无论是在旧的还是新的电脑上），但我似乎无法理解其他浏览器。我甚至尝试过将字体改为Times，并让动画从普通变为斜体……但仍然一无所获

请帮帮我！我快死了

这是我的HTML：

<div class="body">
<span id="first">One</span>, <span id="second">Two</span>.</span>
</div>

---

字体样式

在技术上不可设置动画。参考：

事实上，它在某些浏览器中工作是非常幸运的。你可以尝试用

transform:skewX（-10deg）

来假装它，并调整角度以适合你

这里有一个例子

---

单击css框中的“查看已编译”，查看带有供应商前缀的版本

谢谢！我感觉字体风格是个问题。从现在开始将使用transform。非常感谢！

.body {
  font-family: "Arial Rounded MT Bold";
  font-size: 9em;
  line-height: 1em;
  letter-spacing: -3px;
  font-kerning: normal;
}

@-webkit-keyframes shear {
    0% {font-style: normal;}
    100% {font-style: oblique;}
}

@-moz-keyframes shear {
    0% {font-style: normal;}
    100% {font-style: oblique;}
}

@-o-keyframes shear {
    0% {font-style: normal;}
    100% {font-style: oblique;}
}

@keyframes shear {
    0% {font-style: normal;}
    100% {font-style: oblique;}
}

#first {
  -webkit-animation: shear 6s 1;
  -moz-animation: shear 6s 1;
  -o-animation: shear 6s 1;
  animation: shear 6s 1;
}

#second {
  -webkit-animation: shear 9s 2;
  -moz-animation: shear 9s 2;
  -o-animation: shear 9s 2;
  animation: shear 9s 2;
}