CSSのフォントスタイルのアニメーションがSafariとFirefoxで動作しない

Question

私は短時間のうちに普通のフォントから斜めのフォントに移行する非常に簡単なアニメーションに取り組んでいます。 Chromeではうまく動作しますが、SafariとFirefoxは協力していません。インターネット上で広範囲に検索して答えが得られ、何も効果がありませんでした！私はWebkitプレフィックスを含んでおり、名前、期間などで属性を分けることさえ試みました。

2つの別々のコンピュータで旧式のSafariを使用しています。まず2012年のMacBook ProのSafari 6.2（OS X 10.8.5）です。 2番目は27 "iMac（El Capitan）で実行されているSafari 9です。

私が言っていたように、それはChrome上で動作します（古いコンピュータと新しいコンピュータの両方）。私も何もまだ...タイムズにフォントを変更するとアニメーションがイタリックに通常から行く持つ試さない

をこれが私を殺して私を助けてください

ここに私のHTMLです：。！。

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

CSS：

.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; 
} 

Answer 1

font-styleは、技術的にはnot animatableです。参照：https://developer.mozilla.org/en/docs/Web/CSS/font-style

一部のブラウザでは機能するというのは単なるラッキーです。あなたはtransform: skewX(-10deg)と偽造しようとすると、あなたに合ったものに角度を調整することができます。

ここでの例では、ありがとうベンダープレフィックス