CSS动画优雅降级的简单总结
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')做下动画处理，当然，如果动画元素很多且很杂，我们可以事先未那些要进行动画的元素统一加上之类的后面好处理，animation-delay之类的也可以用delay()代替
为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为前端工程师，乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习扣qun：784783012 无偿分享一些资深前端开发工程师录制的视频录像（从零基础到项目实战案例），前端工程师必备的知识体系。还能领取免费的学习资源
当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有效资源还是很有必要的。