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无限循环动画错误

回答

相关问题