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