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

Question

我卡住了。我正在尝试让嵌套旋转动画在 IE11 上运行，但我尝试过的任何方法都无法在我的网站上运行。

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

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

这是它在 IE11 中的样子

以及它在其他浏览器中的样子。

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

Fiddle

在我的生产网站上，我在 bootstrap 模态中有这个等待面板，所以在差异中，有 bootstrap 库、bootstrap css、模态标记和现代化工具。我只是不明白这些如何只干扰 ccw 关键帧动画而不影响叠加动画。

Actual Website

此时我完全不知所措。这并不是说动画根本不起作用，只是 ccw 关键帧不起作用。有趣的是，如果我删除 cw 关键帧，那么 ccw 关键帧就可以了。

CSS

.waitPanel {
  overflow: hidden;
}

@keyframes cw {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes ccw {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes progress {
  0% {
    width: 0;
  }
  8% {
    width: 50px;
  }
  16% {
    width: 75px;
  }
  90% {
    width: 95px;
  }
  100% {
    width: 105px;
    border-radius: 10px;
  }
}

.carrierLoading {
  width: 110px;
  height: 60px;
  position: absolute;
  -webkit-animation: ccw 10s linear infinite;
  -moz-animation: ccw 10s linear infinite;
  -ms-animation: ccw 10s linear infinite;
  -o-animation: ccw 10s linear infinite;
  animation: ccw 10s linear infinite;
}

.carrierLogos {
  width: 250px;
  margin: 50px auto;
  height: 250px;
  position: relative;
  -webkit-animation: cw 10s linear infinite;
  -moz-animation: cw 10s linear infinite;
  -ms-animation: cw 10s linear infinite;
  -o-animation: cw 10s linear infinite;
  animation: cw 10s linear infinite;
}

.carrierLoading .bullet {
  width: 40px;
  height: 40px;
  left: 35px;
  top: 0;
  position: absolute;
  font-size: 40px;
}

.carrierLoaded .overlay {
  position: absolute;
  top: 8px;
  left: 0;
  width: 0;
  background: rgba(0, 255, 0, .3);
  height: 46px;
  bottom: 8px;
  border-radius: 10px 0 0 10px;
  -webkit-animation: progress 60s linear 1s infinite;
  -moz-animation: progress 60s linear 1s infinite;
  -ms-animation: progress 60s linear 1s infinite;
  -o-animation: progress 60s linear 1s infinite;
  animation: progress 60s linear 1s infinite;
}

.carrierLoaded .bullet {
  display: none;
}

HTML

<div id="Searching" title="Please Wait" style="text-align: center;">
  <div class="waitPanel">
    <p>Please wait while we lookup your insurance rates. This may take a few minutes.</p>
    <!--
    <p><img src="/DemoAgent/Images/indicators/progress.gif" alt="Please Wait"/></p>
    -->
    <div class="carrierLogos">
      <div class="carrierLoading " style="left: 195px; top: 95px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/10865.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: 175px; top: 163px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/UNITR.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: 122px; top: 209px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/KWPRE.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: 52px; top: 219px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/B4249.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: -12px; top: 189px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/GRNG.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: -50px; top: 130px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/10031.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: -50px; top: 60px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/10864.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: -12px; top: 1px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/PROGR.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: 52px; top: -29px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/KWPIO.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: 122px; top: -19px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/KWPAT.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: 175px; top: 27px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/10730.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
    </div>
  </div>

</div>

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;

 }

Answer 1

我已经找到解决方法。延迟动画直到页面加载完成，这在某些时候是可行的。添加轻微的延迟似乎始终如一。我还删除了供应商特定的标记。对于我定位的所有浏览器来说，这都是不必要的。

.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);
});

我仍然对不依赖时间来正常工作的答案感兴趣。

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

Nested CSS3 rotation animation not working in IE11

css

css-transitions

internet-explorer-11