@keyframes嵌套在@media中IE浏览器兼容问题

    
    
    
    



  

  
针对ie的keyframes在@media中的兼容问题
  

    
问题描述
    @keyframes嵌套于@media中时，其余浏览器均显示正常，而ie不识别
  
  

    
解决方法
    1.在动画不是特别多的情况下可以使用for_ie.css文件中的写法，给每个分辨率下写不同的动画名；

    优点：减少浏览器加载文件的次数，有利于提高浏览器渲染速度

    缺点：在每个分辨率下都得加载不同的keyframe动画名，命名都不能相同，起不同的名字较麻烦

    2.在动画效果特别多的页面适合给IE单独引入它的样式文件，如目前的例子

    优点：针对不同浏览器使用不同样式，keyframe动画命名简单，样式清晰明了

    缺点：通过js判断后加载不同css文件会阻断浏览器渲染，延缓浏览器渲染速度

    推荐使用第1种
  

其中，myBrowser()是用来判断浏览器是否为火狐、谷歌、ie及ie10、ie11

for_ie.css文件如下

/*宽度大于400px*/
@media (min-width: 400px) {
	.box{
  		-moz-animation: spinBig 1s infinite;	
    	-webkit-animation: spinBig 1s infinite;	
    	animation: spinBig 1s infinite;	
	} 
}
@-webkit-keyframes spinBig {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(360deg);
	background-color: blue;
	}
}
@-moz-keyframes spinBig {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(360deg);
	background-color: blue;
	}
}
@keyframes spinBig {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(360deg);
	background-color: blue;
	}
}

/*宽度小于400px*/
@media (max-width: 400px) {
	.box{
		-moz-animation: spinSmall 1s infinite;
    	-webkit-animation: spinSmall 1s infinite;
    	animation: spinSmall 1s infinite;
	}
    
}
@-webkit-keyframes spinSmall {
	  0% {
	    transform: rotate(360deg);
	  }
	  100% {
	    transform: rotate(0deg);
	    background-color: red;
	  }
	}
	@-moz-keyframes spinSmall {
	  0% {
	    transform: rotate(360deg);
	  }
	  100% {
	    transform: rotate(0deg);
	    background-color: red;
	  }
}
@keyframes spinSmall {
	0% {
	transform: rotate(360deg);
	}
	100% {
	transform: rotate(0deg);
	background-color: red;
	}
}