CSS3動畫無限在Internet Explorer 11中無法正常工作

我有一個CSS3動畫，它可以在Chrome，Firefox，Safari中完美工作，但在IE11之後，一個完整的動畫很奇怪地跳躍，就像沒有動畫一樣。然後它重新開始。 http://screencast.com/t/7KpNdnk7XX1w CSS3動畫無限在Internet Explorer 11中無法正常工作

.main-circle { 
 
\t position: relative; 
 
\t height: 19.5rem; \t 
 
\t width: 19.5rem; 
 
\t margin-left: 2rem; 
 
\t border-radius: 100%; \t 
 
\t border: 1px solid black; \t 
 
} 
 
.orbit { 
 
\t display: block; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t width: 5em; 
 
\t height: 5em; 
 
\t margin-top: -2.25em; 
 
\t margin-left: -2.25em; 
 
\t border-radius: 100%; \t 
 
\t border: 1px solid black; 
 
\t animation-name: orbit; 
 
\t animation-iteration-count: infinite; \t 
 
\t animation-direction: alternate-reverse; \t 
 
\t animation-timing-function: ease-in-out; 
 
\t animation-duration: 1s; 
 
\t background: white; 
 
} 
 
@keyframes orbit { 
 
\t from { transform: rotate(355deg) translateX(-9.75em) rotate(-355deg); } 
 
\t to { transform: rotate(290deg) translateX(-9.75em) rotate(-290deg);} 
 
}

<div class="main-circle"> 
 
\t <div class="orbit"></div> 
 
</div>

來源

2016-03-25 Roland Schütz

無法看到IE11 +贏得任何這樣的問題在10 – Harry

見截屏ATT通過這個http://dabblet.com/gist/0008834232ff19226069的瀏覽器，在IE11 @ Win10上做了很多痛苦。還在真實的IE11 @ Win7上進行了確認。在第一個完整動畫週期後出現錯誤。 –

這個問題是非常奇怪的！
我不能告訴你爲什麼動畫是錯誤的IE11但我發現一個竅門，使工作順利:)
入住此codepen：http://codepen.io/anon/pen/oxwXMW?editors=0100

我alternate改變animation-direction的價值，我改變了你動畫位（from - >0%, 0.01%和to - >100%）

告訴我，如果它的固定電腦:)

來源

2016-03-25 14:25:26 Mamboleoo

太棒了。這解決了這個問題！這顯然是IE11中的一個錯誤，他們似乎在Edge中修復了這個錯誤。 :) –

天哪，我完全忘了這個0.01奇怪的修復。我的情況動畫被設置爲不透明度：0;將其更改爲0.01而不是0修復IE11 = / – rafaelbiten

CSS3動畫無限在Internet Explorer 11中無法正常工作

回答

相關問題