IE-CSS動畫在動畫結尾處跳回

我想讓div在頁面中央動起來，而不必四處移動。 div應該在旋轉（無限）時上下縮放，而且它位於頁面中心的一個位置。在Firefox和Chrome中這樣做確實很好，但在IE11中，div從頁面頂部開始，然後動畫到所需的位置。一旦動畫完成，div跳回頂部並重新開始。IE-CSS動畫在動畫結尾處跳回

這是JSFiddle演示了這一點。請在Chrome和IE瀏覽器中查看它們以查看對比。

下面是代碼：

@keyframes logosplash { 
     0% {transform: translateY(50vh) scale(1.25) rotateZ(-45deg);} 
    50% {transform: translateY(50vh) scale(1) rotateZ(135deg);} 
    100% {transform: translateY(50vh) scale(1.25) rotateZ(315deg);} 
} 
.logoSplash { 
    animation: logosplash 1.5s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96); 
    -webkit-animation: logosplash 1.5s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96); 
} 
.logo { 
    position: fixed; 
    width: 13.5vw; 
    height: 13.5vw; 
    left: 50%; 
    margin-top: calc(-6.75vw - 5px); 
    margin-left: calc(-6.75vw - 5px); 
    box-shadow: 0px 0px 10px #000, inset 0px 0px 5px #000; 
    border-radius: 25px; 
    border: 5px solid #fff; 
    transform: translateY(50vh) scale(0.6) rotateZ(-45deg); 
    z-index: 1002; 
} 
<div class="logo logoSplash"></div>

來源

2015-07-10 MattsterJames

這是因爲translateY(50vh)在IE被不同的解釋。（我不確定在這方面的細節，所以請隨時在這裏幫助。）從關鍵幀中刪除它，並將top:50%;添加到.logo，這應該可以解決問題。

看起來translateY(50vh)在transform: translateY(50vh) scale(0.6) rotateZ(-45deg);被忽略，但我不知道爲什麼。另外，包含在整個動畫中保持不變的屬性值是很糟糕的語義：它是完全多餘的。

來源

2015-07-10 20:09:06 jaunt

IE-CSS動畫在動畫結尾處跳回

回答

相關問題