Question

我看到动画循环结束时发生了一个恼人的错误，它会闪烁几分之一秒，并使动画看起来不稳定。

这是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-index。

有什么建议吗？

Answer 1

＆＃34;波涛汹涌的问题＆＃34;行为是：您可以更改元素的尺寸和位置。这会强制浏览器重新呈现元素（在本例中为: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）

Css无限循环动画bug

1 个答案: