Css infinite loop animation bug - css

Question

I see an annoying bug happening at the end of the animation loop, where it blinks for a fraction of a second, and makes the animation look choppy.
Here is the 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;
}
}
I've tried adding another frame, but it doesn't really remove it. I also tried hiding the before div afterwards, but doesn't work. Neither with z-index.
Any suggestions?

Answer 1

The problem with the "choppy" behaviour is: You change the dimensions and the positioning of your element. This forces the browser to re-render the element (in this case your :before pseudo-element. This makes the calculation for the browser way harder than it has to be.
Instead of alternating the dimensions, you could use a simple transform. Transforming elements does not force a re-rendering of the element and therefore performs way smoother. Also, it makes the code a bit easier as well. I forked your CodePen and used the transform instead of the dimensions: http://codepen.io/HerrBertling/pen/NbrPJb
It's certainly not perfect concerning the animation and the dimensions, but it should run way smoother.
(Check e.g. this Medium post for further info about the browser's behaviour: https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108#.sykm5uqyv)