Weird overlay / flicker on css animation - css

Question

When I animate a simple circle I get a weird flicker on the side - like something tryingh to push inside - and I can't figure out why. It also happens when I use keyframes to animate and on different browsers.
Any help appreciated.
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #E56262;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 3;
}
.circle {
background-color: #fff;
width: 100px;
height: 100px;
border-radius:50%;
box-shadow: 0px 0 15px 2px #424040;
position: relative;
z-index: 4;
transition: all 1s;
}
.circle:hover {
transform: scale(1.5);
}
#keyframes scaleMe {
0% {
transform: scale(0%);
}
50% {
transform: scale(100%);
}
100% {
transform: scale(0%);
}
}
<div class="frame">
<div class="center">
<div class="circle"></div>
</div>
</div>

Answer 1

I think your problem is similar to this. CSS Animation break transform
Removing the transform(-50%, -50%) remove the flickering, so I centered your div in another way and it look's ok.
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #E56262;
display: flex;
}
.center {
margin: auto;
z-index: 3;
}
.circle {
background-color: #fff;
width: 100px;
height: 100px;
border-radius:50%;
box-shadow: 0px 0 15px 2px #424040;
position: relative;
z-index: 4;
transition: all 1s;
}
.circle:hover {
transform: scale(1.5);
}
#keyframes scaleMe {
0% {
transform: scale(0%) translate(-50%,-50%);
}
50% {
transform: scale(100%) translate(-50%,-50%);
}
100% {
transform: scale(0%) translate(-50%,-50%);
}
}
<div class="frame">
<div class="center">
<div class="circle"></div>
</div>
</div>