A brief summary of css animation graceful degradation: web front-end entry to combat

A brief summary of CSS animation graceful degradation

CSS animation related properties

transition: Compatibility

transform 3D: Compatibility

transform 2D: Compatibility

animation：

You can see the animation in IE8 (here focused on IE) and below do not support, IE9 only supports due transform (non transform3d)

Graceful degradation

<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>

The main hero is naturally translate3d, because IE9 does not support the naturally ignored, so translate IE also can not afford to lower the efficiency, opacity and other simple attributes to be a hack.

JQ with animation instead of, or the example above it:
First, of course, to determine the browser support or not to use CSS properties to determine the function as follows:

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

Small partners interested in the web front end this technology can be added to our study circle, the sixth year of work, learning to share some with you to develop practical details that need attention. 767-273-102 ×××. From the zero-based front-end to learn how to start. Are a group of people with a dream, we may be in different cities, but we will walk together with the front tip of the tip

If not, then on to $ ( '. A') to do the next animated, of course, if a lot of animated elements and very complex, we can not advance those who want to be unified behind the animated elements together like a good deal, animation- delay and the like may also be used delay () instead of