嵌套的CSS3旋轉動畫無法在IE11中工作

我被卡住了。我試圖獲得一個嵌套旋轉動畫在IE11上工作，但沒有任何我已經嘗試過在我的網站上工作。嵌套的CSS3旋轉動畫無法在IE11中工作

我花了很多時間嘗試在Stack Overflow和其他網站上列出的不同修復程序。我試圖讓我的等待面板中的徽標在外部div旋轉時保持水平。這適用於Chrome，Safari，Edge和Firefox。只是不在IE 11中（我不關心IE的老版本）。

如圖所示，即使在IE11中，外部div旋轉，並且進度疊加按預期工作。但內部divs上的ccw關鍵幀（封裝了徽標和進度疊加層）不起作用。

這裏是什麼樣子的IE11

什麼它看起來像在其他瀏覽器。

我爲此設置了一個小提琴，並在Safari和IE11上測試了它。令我驚訝的是，小提琴的作品！問題是，我不知道爲什麼。我懷疑小提琴網站有一些代碼來處理IE中的怪癖，這也是我的小提琴。

Fiddle

在我的網站上製作，我有一個引導模式此等待面板，這樣的差異中，有引導庫，引導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; 

}

來源

2016-11-17 B2K

嗯什麼是奇怪的是在你的IE11的小提琴一切都顯示正確，但是當我去的網站它顯示不正確。你有沒有試過用幾臺不同的電腦進行測試？ – crazymatt

@crazymatt是的，我已經在2個不同的Windows機器上試過了。並且你已經確認了。這使得3。 – B2K

我已經找到解決類似的問題。拖延動畫，直到頁面加載工作時間一段時間。稍微延遲似乎一直工作。我還刪除了供應商特定的標記。對於我所瞄準的所有瀏覽器而言，這是不必要的。

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

我仍然對不依賴計時正確工作的答案感興趣。

來源

2016-11-17 19:34:48 B2K

嵌套的CSS3旋轉動畫無法在IE11中工作

回答

相關問題