While attempting to animate a simple circle, I've encountered a strange flicker on one side that appears to be pushing inward. This issue persists even when using keyframes for animation and across various browsers.
Any assistance with this problem would be greatly 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>