-webkit-アニメーションのプレフィックス

Question

-webkit-接頭辞が@keyframesと@-0webkit-keyframesの両方に使用されているCSSがいくつか見受けられました。

私は約

animate.cssが必要であることを話していますか？

Answer 1

-webkit-プレフィックスはこれらのブラウザで@keyframesとanimation*の両方で必要とされています

Chrome <= 42 
Firefox <= 15 
Safari <= 8 
Opera <= 29 
Safari&Chrome (iOS) <= 8.4 
Android browser <= 4.4.4 

は、例えば、このコードを取ることができます：

.animated { 
    animation-duration: 1s; 
} 

このコードは、IE 11とFirefox 37で動作します、 Chrome 40では動作しません。Safari 7では動作しません。

コードを変更する場合：

.animated { 
    -webkit-animation-duration: 1s; 
} 

このコードは、クローム/ Firefoxの/サファリの最新バージョンでは動作しますが、両方のオプションを持っていることをお勧めしている理由これはIE 10

では無視されます。

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
} 

そして、同じことが@keyframesと@-webkit-keyframesについても働きます。

最新のバージョンのみを気にしている場合は、-webkit-の接頭辞を避けることができます。それ以外の場合は、両方のバージョンを使用することをお勧めします。