CSS动画优雅降级的简单总结

转载自：http://waynecz.github.io/2016…

CSS 动画相关属性

transition：兼容性


transform 3D：兼容性


transform 2D：兼容性


animation：


可以看到动画在 IE8（这里主要讨论 IE）及以下完全不支持，IE9 由于只支持 transform(非 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>

主要功臣自然是 translate3d, 因为 IE9 不支持自然会忽略掉，所以 translate 也在 IE 下不起效了，opacity 等简单属性做个 hack 即可。

用 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’) 做下动画处理，当然，如果动画元素很多且很杂，我们可以事先未那些要进行动画的元素统一加上 class=”animation” 之类的后面好处理，animation-delay 之类的也可以用 delay() 代替