戦闘へのWebフロントエンドエントリー：CSSアニメーション優雅な劣化の概要

CSSアニメーション優雅な劣化の概要

CSSアニメーション関連のプロパティ

トランジション：互換性

3D変換：互換性

2D変換：互換性

アニメーション：

あなたはIE8でアニメーションを見ることができます（ここではIEに焦点を当てた）、以下をサポートしていませんが、IE9は唯一の（非transform3d）変換によるサポート

優雅な劣化

<div class="a"></div>

CSS：

web前端开发学习Q-q-u-n： ××× ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
<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

この技術を終了するWebフロントに興味を持って小さなパートナーは、注意が必要な実践的な内容を開発するためにあなたといくつかを共有することを学ぶ、私たちの研究サークル、作品の第六年に追加することができます。767-273-102×××。ゼロベースのフロントエンドから起動する方法を学習します。夢を持つ人々のグループは、我々は別の都市にあってもよいが、我々は一緒に歩いていく先端の先端

そうでない場合には、$（「A」）の上の次のアニメーションを行うには、もちろん、アニメーション要素と非常に複雑な多くの場合、私たちは一緒に良い取引のようなアニメーション要素の後ろに統一されるようにしたい人、animation-を進めることができません遅延等も遅延を使用することができる（）の代わりに