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()代替