SafariでCSSの移行が機能しない（ファーストショット）

Question

ここで絶対的なnoobは、事前に行くので。

ここで見た前の例に基づいて、スタート/ストップの減速を行った。

JSFiddle

.small-wheel, .big-wheel{ 
    transition: all 2s ease-out; 
} 

問題は、Safariが効果をとる遷移せずに（最初のコマンドに）即時停止を示すことです。この最初の後、移行は毎回問題なく動作します。

FirefoxとChromeでは、このような動作はありません。

この件に関するご支援をいただき、誠にありがとうございます。

Answer 1

ここでは、クロスブラウザで動作させるために必要なベンダーのプレフィックスがあります。

.small-wheel, .big-wheel{ 
    -webkit-transition: all 2s ease-out; 
    -moz-transition: all 2s ease-out; 
    -o-transition: all 2s ease-out; 
    transition: all 2s ease-out; 
} 

私はあなたがautoprefixerをブックマークして、生産レベルのCSSを必要なときにそれを使用することをお勧め。最適な方法は、設定可能なのでマシンにインストールすることですが、95％の場合は、オンラインツールがその作業を行います。

Answer 2

私は

.stop { 
    -webkit-animation-play-state: paused; 
    -o-animation-play-state: paused; 
    -moz-animation-play-state: paused; 
    animation-play-state: paused; 
} 

を使用すると、特にiOSのブラウザ上で、非常にクロスブラウザの互換性がないことを発見しました。

代わりに私が今使用しています：

.stop{ 
    -webkit-animation: none !important; 
    -moz-animation:none !important; 
    animation:none !important; 
}