[分享]css关键帧兼容ie

CSS关键帧动画在现代浏览器中已经得到了广泛应用，但在旧版的IE浏览器中却不兼容。如何实现CSS关键帧兼容IE浏览器呢？下面就给大家分享几种方法。方法一：使用IE专属语句mskeyframes{ 0{...

CSS关键帧动画在现代浏览器中已经得到了广泛应用，但在旧版的IE浏览器中却不兼容。如何实现CSS关键帧兼容IE浏览器呢？下面就给大家分享几种方法。

方法一：使用IE专属语句

@-ms-keyframes{
  0%{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(90deg);
  }
  100%{
    transform: rotate(180deg);
  }
} 

在CSS中加入此语句，可以兼容IE10及以上版本的浏览器。但是，该语句只能针对IE浏览器生效。

方法二：使用JavaScript兼容IE浏览器

if(navigator.userAgent.match(/MSIE (\d+)/)){
  var ieVersion = parseInt(RegExp.$1);
  if(ieVersion <= 9){
    var el = document.getElementById("myEl");
    el.style.position = "relative";
    var left = 0;
    setInterval(function(){
      left += 5;
      if(left > 100){
        left = 0;
      }
      el.style.left = left + "px";
    }, 50);
  }
} 

在JavaScript中判断浏览器版本，如果是IE9及以下版本，通过JavaScript实现关键帧动画。这种方法可以兼容所有IE浏览器版本，但需要编写JS代码。

方法三：使用jQuery兼容IE浏览器

$(document).ready(function(){
  if($('html').hasClass('lt-ie10')){
    $('#myEl').animate({
      left: "+=100px"
    }, 1000);
  }
}); 

在jQuery中判断浏览器版本，如果是IE10及以下版本，通过jQuery实现关键帧动画。这种方法可以兼容所有IE浏览器版本，但需要引入jQuery库。