CSSアニメーション優雅な劣化の概要
CSSアニメーション関連のプロパティ
トランジション：互換性
3D変換：互換性
2D変換：互換性
アニメーション：
あなたはIE8でアニメーションを見ることができます（ここではIEに焦点を当てた）、以下をサポートしていませんが、IE9は唯一の（非transform3d）変換によるサポート
優雅な劣化
<div class="a"></div>CSS：
<style>
div {
width: 100px;
height: 100px;
background: #3ea5ff;
}
.a { /*a初始化元素动画前样式及加入动画*/
transform: translate3d(-300px,0,0);/*现代浏览器下移开元素*/
-ms-transform: translate3d(-300px,0,0);/*IE10+下移开元素*/
opacity: 0;/*透明元素*/
opacity:1\9\0; /*IE9hack，是元素不透明*/
animation: leftIn .7s ease-out forwards;
}
@keyframes leftIn {
0% {transform: translate3d(-300px,0,0);opacity: 0}
100% {transform: translate3d(0,0,0);opacity: 1}
}
</style>IE9は、自然に無視をサポートしているのでハックする効率、不透明度および他の単純な属性を下げている余裕はありませんまた、IEを翻訳していないため、主人公は当然、translate3dされます。
アニメーションの代わりに、または上記の例とJQ：
まず、もちろん、次のように関数を決定するために、CSSプロパティを使用するようにブラウザのサポートを決定するかします。
function isSupportThis(attrName) {
var prefixs = ['webkit', 'Moz', 'ms', 'o'],
i,
humpString = [],
htmlStyle = document.documentElement.style,
// 将animation-delay这种带杠转化为htmlStyle中的驼峰属性名
toHumb = function (string) {
return string.replace(/-(\w)/g, function ($0, $1) {
return $1.toUpperCase();
});
};
for (i in prefixs) {
humpString.push(toHumb(prefixs[i] + '-' + attrName))
};
humpString.push(toHumb(attrName));
for (i in humpString) {
if (humpString[i] in htmlStyle) return true
};
return false
}
isSupportThis('animation') // IE9下falseそうでない場合には、$（「A」）の上の次のアニメーションを行うには、もちろん、アニメーション要素と非常に複雑な多くの場合、私たちは一緒に良い取引のようなアニメーション要素の後ろに統一されるようにしたい人、animation-を進めることができません遅延等も遅延を使用することができる（）の代わりに
誰もがあなたが乱雑フルスタックエンジニアによるフロントエンドエンジニア、さらには道になるため大量のリソースを共有するために、簡単で効率的かつ無料の学習に役立つために。フロントエンドエンジニアに必要な知識、（実際のケースを投影するゼロベースからの）いくつかのシニアフロントエンドの開発エンジニアは、動画を録画784783012未払いのシェア：私たちは、フロントエンドのフルスタック学習バックルqunをお勧めするためにここにいます。また、無料の学習リソース受ける
非効率性につながる学習を継続する自信に影響を与え、本当のスタート学習は必然的に開始するためにどこか分かりません。
しかし、最も重要なことは、私がキーテクノロジーを習得する必要があるかわからないで、頻繁に、ピット学習を強化多くの時間を無駄に終わる、それが効果的か、必要な資源です。