Css無限循環動畫錯誤

我看到一個令人討厭的錯誤發生在動畫循環結束時，閃爍幾分之一秒，並且動畫看起來不連貫。Css無限循環動畫錯誤

這是pen。

SCSS：

$dim: 60px; 
$mult: 1.8; 
$color: #bada55; 

body, html { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background-color: #36a; 
} 
.circle { 
    background-color: $color; 
    border-radius: 50%; 
    width: $dim; 
    height: $dim; 
    position: relative; 
} 

.circle:before { 
    content: ""; 
    display: table; 
    background-color: $color; 
    border-radius: 50%; 
    position: absolute; 
    animation: notification 800ms ease-in infinite; 
} 

@keyframes notification{ 
    0% { 
     opacity: 1; 
     width: $dim; 
     height: $dim; 
     left: 0; 
     top: 0; 
    } 

    90% { 
     opacity: 0; 
     left: -(($dim * $mult) - $dim)/2; 
     top: -(($dim * $mult) - $dim)/2; 
     width: $dim * $mult; 
     height: $dim * $mult; 
    } 

    100% { 
     opacity: 0; 
     width: $dim; 
     height: $dim; 
     left: 0; 
     top: 0; 
    } 
}

我已經嘗試添加另一個框架，但它並沒有真正將其刪除。之後我也嘗試隱藏之前的div，但不起作用。無論是Z指數。

有什麼建議嗎？

來源

2016-11-14 Florin Pop

在Chrome看起來甚至buggier我:-(它甚至更加起伏 –

它的不透明度0已經 –

我真的不明白你的意思還ease-。在沒有魔法的情況下，它不會讓任何事情變得順利無論你做什麼 – reuns

「波濤洶涌」行爲的問題是：您更改了元素的尺寸和位置。這會強制瀏覽器重新渲染元素（在這種情況下，您的:before僞元素，這使瀏覽器的計算方式比它必須更難）

而不是交替的尺寸，你可以使用一個簡單的。transform轉化元素不會強制元素的重新渲染，因此執行的方式平滑此外，它使代碼更容易一點，以及我叉你CodePen和使用的transform，而不是尺寸：http://codepen.io/HerrBertling/pen/NbrPJb

關於動畫和尺寸肯定不是很完美，但它應該更順暢。

（檢查例如此介質後關於瀏覽器的行爲進一步信息：。https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108#.sykm5uqyv）

來源

2016-11-14 13:02:46 HerrBertling

感謝您的建議，但它仍然有波濤洶涌的結局......當它淡出時，它再次出現像不透明1. –

You可能需要調整動畫的時間軸然後Chrome開發人員工具對此非常棒 - 請查看操作方法：https：//developers.google.com/web/tools/chrome-devtools/inspect-styles/animations – HerrBertling

Css無限循環動畫錯誤

回答

相關問題