嵌套CSS3旋转动画在IE11中不起作用

我卡住了。我正试图在IE11上制作一个嵌套的旋转动画，但我在我的网站上所做的一切都不起作用

我花了很多时间尝试Stack Overflow和其他网站上列出的不同修复程序。我试图让我的等待面板中的徽标在外部div旋转时保持水平。这在Chrome、Safari、Edge和Firefox中都能完美运行。只是不在IE11中（我不关心旧版本的IE）

如图所示，即使在IE11中，外部div也会旋转，进度覆盖也会按预期工作。但是内部div（封装徽标和进度覆盖）上的ccw关键帧不起作用

以下是IE11中的情况

以及它在其他浏览器中的外观。

我为此设置了一个小提琴，并在Safari和IE11上进行了测试。令我惊讶的是，小提琴居然能用！问题是，我不知道为什么。我怀疑fiddle站点有一些代码来处理IE中的怪癖，这也修复了我的fiddle

在我的生产网站上，我有一个引导模式下的等待面板，所以在不同之处中，有引导库、引导css、模式标记和modernizer。我只是不知道这些会如何干扰ccw关键帧动画，而不会影响叠加动画

在这一点上我完全困惑不解。这并不是说动画根本不起作用，只是ccw关键帧不起作用。有趣的是，如果我移除cw关键帧，那么ccw关键帧可以工作

CSS

HTML

请稍候，我们正在查找您的保险费率。这可能需要几分钟

•
•
•
•
•
•
•
•
•
•
•

JAVASCRIPT

 (function($) {
   $(function() {
     $('.carrierLoading img').load(function() {
       $(this).closest('.carrierLoading').addClass('carrierLoaded');
     }).each(function() {
       if ($(this).prop('complete')) {
         $(this).trigger('load');
       }
     });
     //animateSelector('.carrierLoading');
     circleSelector('.carrierLoading');
   });
 })(jQuery);

 // arranges logos along a circular path.
 // if width is less than 85, move logos randomly, otherwise
 // rotate the circle (see css animations).
 function circleSelector(selector) {
   var fields = $(selector);
   var height = $('.carrierLogos').height();
   var width = $('.carrierLogos').width();
   var radius = Math.min(height, width) / 2;
   if (radius < 85) {
     $('.carrierLogos, .carrierLoading, .carrierLoaded').css('animation', 'none');
     animateSelector('.carrierLoading, .carrierLoaded');
     return;
   }
   var angle = 0;
   var step = (2 * Math.PI) / fields.length;
   fields.each(function() {
     var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
     var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
     $(this).css({
       left: x + 'px',
       top: y + 'px'
     });
     angle += step;
   });
 }

 function makeNewPosition() {
   // Get viewport dimensions (remove the dimension of the div)
   var h = $('.carrierLogos').height() - 60;
   var w = $('.carrierLogos').width() - 110;

   var nh = Math.floor(Math.random() * h);
   var nw = Math.floor(Math.random() * w);
   return [nh, nw];

 }

 // moves logos randomly
 function animateSelector(selector) {
   $(selector).each(function() {
     var newq = makeNewPosition();
     var oldq = $(this).offset();
     var speed = calcSpeed([oldq.top, oldq.left], newq);

     $(this).animate({
       top: newq[0],
       left: newq[1]
     }, speed, function() {
       animateSelector(this);
     });
   });

 };

 function calcSpeed(prev, next) {

   var x = Math.abs(prev[1] - next[1]);
   var y = Math.abs(prev[0] - next[0]);
   var greatest = x > y ? x : y;
   var speedModifier = 0.1;
   var speed = Math.ceil(greatest / speedModifier);
   return speed;

 }

（函数（$）{
$（函数（）{
$（'.carrierLoading img'）.load（函数（）{
$（this）.closest（'.carrierLoading'）.addClass（'carrierload'）；
}).each（函数（{
if（$（this.prop（'complete'））{
$（this.trigger（'load'）；
}
});
//动画选择器（'.carrierLoading'）；
循环选择器（“.载波加载”）；
});
})（jQuery）；
//沿圆形路径排列徽标。
//如果宽度小于85，则随机移动徽标，否则
//旋转圆（请参见css动画）。
函数循环选择器（选择器）{
变量字段=$（选择器）；
变量高度=$（'.carrierLogos'）.height（）；
变量宽度=$（'.carrierLogos'）.width（）；
变量半径=数学最小值（高度、宽度）/2；
如果（半径<85）{
$（'.carrierLogos、.carrierLoading、.carrierloated'）.css（'animation'，'none'）；
动画选择器（'.carrierLoading，.carrierloaled'）；
返回；
}
var角=0；
var步长=（2*Math.PI）/fields.length；
字段。每个（函数（）{
var x=Math.round（宽度/2+半径*Math.cos（角度）-$（this.width（）/2）；
变量y=Math.round（高度/2+半径*Math.sin（角度）-$（此）.height（）/2）；
$（this.css）({
左：x+‘px’，
顶部：y+‘px’
});
角度+=步长；
});
}
函数makeNewPosition（）{
//获取视口尺寸（删除div的尺寸）
var h=$（'.carrierLogos'）.height（）-60；
var w=$（'.carrierLogos'）.width（）-110；
var nh=数学地板（数学随机（）*h）；
var nw=Math.floor（Math.random（）*w）；
返回[nh，nw]；
}
//随机移动徽标
函数动画选择器（选择器）{
$（选择器）。每个（函数（）{
var newq=makeNewPosition（）；
var oldq=$（this.offset（）；
var速度=计算速度（[oldq.top，oldq.left]，newq）；
$（此）。设置动画({
top:newq[0]，
左：newq[1]
}，速度，功能（）{
动画选择器（此）；
});
});
};
函数calcSpeed（上一个，下一个）{
var x=Math.abs（prev[1]-next[1]）；
var y=Math.abs（上一个[0]-下一个[0]）；
var最大=x>y？x:y；
var speedModifier=0.1；
var speed=Math.ceil（最大/速度修改器）；
返回速度；
}

我找到了一个解决方法。延迟动画，直到页面加载完成，这在一定时间内是有效的。增加一点延迟似乎一直有效。我还删除了特定于供应商的标记。这对于我瞄准的所有浏览器都是不必要的

.carrierLoading {
  ...
  /* animation: ccw 10s linear infinite; */
}

.carrierLogos {
  /* animation: cw 10s linear infinite;*/
}

$(window).load(function () {
    setTimeout(function () {
        $('.carrierLoading').css('animation', 'ccw 10s linear infinite');
        $('.carrierLogos').css('animation', 'cw 10s linear infinite');
    },1000);
});

---

我仍然对一个不依赖时间的答案感兴趣。

hmm奇怪的是，在IE11上你的小提琴中，所有东西都显示正确，但当我访问网站时，它显示错误。你试过用两台不同的计算机进行测试吗？@crazymatt是的，我在两台不同的Windows计算机上进行过测试。你也证实了。那就是3。

 (function($) {
   $(function() {
     $('.carrierLoading img').load(function() {
       $(this).closest('.carrierLoading').addClass('carrierLoaded');
     }).each(function() {
       if ($(this).prop('complete')) {
         $(this).trigger('load');
       }
     });
     //animateSelector('.carrierLoading');
     circleSelector('.carrierLoading');
   });
 })(jQuery);

 // arranges logos along a circular path.
 // if width is less than 85, move logos randomly, otherwise
 // rotate the circle (see css animations).
 function circleSelector(selector) {
   var fields = $(selector);
   var height = $('.carrierLogos').height();
   var width = $('.carrierLogos').width();
   var radius = Math.min(height, width) / 2;
   if (radius < 85) {
     $('.carrierLogos, .carrierLoading, .carrierLoaded').css('animation', 'none');
     animateSelector('.carrierLoading, .carrierLoaded');
     return;
   }
   var angle = 0;
   var step = (2 * Math.PI) / fields.length;
   fields.each(function() {
     var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
     var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
     $(this).css({
       left: x + 'px',
       top: y + 'px'
     });
     angle += step;
   });
 }

 function makeNewPosition() {
   // Get viewport dimensions (remove the dimension of the div)
   var h = $('.carrierLogos').height() - 60;
   var w = $('.carrierLogos').width() - 110;

   var nh = Math.floor(Math.random() * h);
   var nw = Math.floor(Math.random() * w);
   return [nh, nw];

 }

 // moves logos randomly
 function animateSelector(selector) {
   $(selector).each(function() {
     var newq = makeNewPosition();
     var oldq = $(this).offset();
     var speed = calcSpeed([oldq.top, oldq.left], newq);

     $(this).animate({
       top: newq[0],
       left: newq[1]
     }, speed, function() {
       animateSelector(this);
     });
   });

 };

 function calcSpeed(prev, next) {

   var x = Math.abs(prev[1] - next[1]);
   var y = Math.abs(prev[0] - next[0]);
   var greatest = x > y ? x : y;
   var speedModifier = 0.1;
   var speed = Math.ceil(greatest / speedModifier);
   return speed;

 }

.carrierLoading {
  ...
  /* animation: ccw 10s linear infinite; */
}

.carrierLogos {
  /* animation: cw 10s linear infinite;*/
}

$(window).load(function () {
    setTimeout(function () {
        $('.carrierLoading').css('animation', 'ccw 10s linear infinite');
        $('.carrierLogos').css('animation', 'cw 10s linear infinite');
    },1000);
});