A brief summary of animation graceful degradation: Starter front-end development 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：

<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

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

To help make learning easy, efficient and free for everyone to share a large number of resources to help you become the front-end engineers, and even the way through the clutter full stack engineers. We are here to recommend a front-end full-stack learning buckle qun: 784783012 unpaid share some senior front-end development engineers recorded video (from zero base to project real case), front-end engineers the necessary knowledge. Also receive free learning resources
when the real start learning inevitably do not know where to start, leading to inefficiencies affect confidence to continue learning.
But the most important thing is I do not know what needs to master key technologies, frequently stepped pit learning, end up wasting a lot of time, it is effective or necessary resources.

Learning the front, we are serious