Nested CSS3 rotation animation not working in IE11

Question

I'm stuck. I'm trying to get a nested rotation animation working on IE11, but nothing that I've tried has worked on my site.

I've spent many hours trying the different fixes listed on Stack Overflow and other sites. I'm trying to get the logos in my wait panel to remain horizontal as the outer div rotates. This works perfectly in Chrome, Safari, Edge and Firefox. Just not in IE 11 (I'm not concerned with older versions of IE).

As shown, even in IE11, the outer div rotates, and the progress overlay works as expected. But the ccw keyframe on the inner divs (encapsulating the logos and the progress overlays) are not working.

Here is what it looks like in IE11

And what it looks like in the other browsers.

I setup a fiddle for this, and tested it on Safari and IE11. To my surprise, the fiddle works! The problem is, I don't know why. I'm suspecting that the fiddle site has some code to deal with quirks in IE which is also fixed my fiddle.

Fiddle

On my production website, I have this wait panel in a bootstrap modal, so among the differences, there's the bootstrap library, bootstrap css, the modal markup, and modernizer. I just don't see how those would interfere with just the ccw keyframe animation and not affect the overlay animation.

Actual Website

I'm completely baffled at this point. It's not like animations aren't working at all, it's just the ccw keyframe that's not working. Interestingly, if I remove the cw keyframe then the ccw one works.

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


  
    Please wait while we lookup your insurance rates. This may take a few minutes.
    
    
      
        
        •
        
      
      
        
        •
        
      
      
        
        •
        
      
      
        
        •
        
      
      
        
        •
        
      
      
        
        •
        
      
      
        
        •
        
      
      
        
        •
        
      
      
        
        •
        
      
      
        
        •
        
      
      
        
        •

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;

 }

B2K · Accepted Answer

I've found a workaround for this. Delaying the animations until the page has loaded worked some of the time. Adding a slight delay seems to work consistently. I also removed the vendor specific markup. That is unnecessary for all the browsers that I'm targeting.

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

I'm still interested in an answer that doesn't rely on timing to work properly.

Nested CSS3 rotation animation not working in IE11

Answers (1)

Related Questions